Responsive 4-section-main

Solution retrospective
This is my solution to this challenge! I haven't really struggled with this challenge until I had to try and create the grid layout. I gave it a shot and this is as close as I can make it. If you have any tips on how to make it EXACTLY like the design then please comment it so I can improve on it. It's also responsive so I have the mobile and the desktop one so I hope you enjoy this solution and I'll see you later!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Kevhec
Hi CybarZoid! Your overall project looks good. However, there are some recommendations you might find useful.
- First of all, your question about positioning using a CSS grid. To solve this and make use of all the power display grid can offer, you should add a grid template right after enabling this display mode. This template has to be according to your needs, in this case, you will need at least 4 grid rows and just 3 grid columns to position the elements as they are in the design. To do this your grid class will be:
@media all and (min-width: 650px) { .grid { display: grid; grid-template-rows: repeat(4, 1fr) grid-template-columns: repeat(3, 1fr); gap: 1rem; } ... }
If you're not familiar with this property I suggest you read the display grid documentation. If you open your developer tools you will see on the elements section that the specific one that has the grid class has a little tag on its right side called "grid". If you click on it the browser will highlight all the rows and columns generated with their specific ids for you to position elements using "grid-row" or "grid-column" on them. This way you can, for example, update your cards__team-builder class to be:
.cards__team-builder { grid-column: 2 / 3; grid-row: 2 / 4; }
I'll leave to you the implementation of the karma box so you can practice 😉.
Another recommendation related to your case is to specify where your grid elements are going to start and end adding on all your
grid-column
orgrid-row
both numbers of the property as in the example above where we tell the element to be positioned starting on row 2 and finish at row 4.Last, but not least, try to add an h1 tag to your projects. If you're not clear about which element should be an h1 you can add a visually hidden one for screen readers only to improve accessibility. And in this same heading flow, ask yourself if the piece of text you're considering a heading represents one. To do this think about the content and if the text you're highlighting describes it (apply this to your h3 on line 25 of your HTML).
I hope you find this useful, Happy coding! 😁
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord