Responsive grid layout with 4 cards

Solution retrospective
Setting up the grid with breakpoints was surprisingly quick. Was very interesting to see the layout shifts and seeing that in action after knowing the theory for a while already. Doing it gain, I would probably set up responsive font sizes (with calc, clamp, etc.)
What specific areas of your project would you like help with?I feel like I had to use a lot of magic numbers to get the margins and font sizes right. Any recommendations on how to make that part of the code more elegant would be welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hitmorecode
Congratulations well done, looks good. Just a few tips
- You should also add
margin: 0;
andpadding: 0;
to the CSS reset - I'll show you a trick to easily convert px to rem add this to the root
font-size: 62.5%;
and add this to the bodyfont-size: 1.6rem;
. With this everything is converted to a base 10. So if you have 16px you can just do 1.6rem. So for every pixel just divide it by 10 and you have the value in rem. - For the border on top of the cards don't use
border-top:
. This will add radius on the inside of the border. Instead make use of pseudo-elements before and after and style the pseudo-elements. - To make things easier on yourself add classes or id's to your elements, this makes it much easier to target them with CSS
I hope you find this helpful
Marked as helpful - You should also add
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