Design comparison
Solution retrospective
I cant seem to remove the big gap in desktop view for the last card. Any suggestions appreciated.
Community feedback
- @HYDROCODERPosted over 3 years ago
Hey there! Great job! You have even put media queries for the medium sizes and it works amazing! The gap may be from the fact that you used .9fr for the columns in the styles of your main tag. Just use
grid-template-columns: repeat(4,1fr)
, give it a width and a max-width (for starters, try this:width: 70%; max-width:1200px
and change it around if you wish). The gap will be reduced and all the cards as a whole will not stretch for larger screen sizes. You may even vertically center the whole thing for larger screen sizes using grid or flex on the body.Hope it helps :).
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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