Four Card Feature Section using SASS and CSS Grid
Design comparison
Solution retrospective
Any feedback would be greatly appreciated!
Community feedback
- @correlucasPosted about 2 years ago
Hey Deborah, congrats for this amazing solution!
Here's one observation:
For some reason after
max-width: 650px
the cards stop to stretch 100% of the width and get aligned left, maybe you need to apply the alignment with grid to avoid it with a new media query:.cards { display: grid; grid-template-columns: 1fr; gap: 1.7rem; align-items: center; justify-items: center; }
Use the standard vertical alignment to make sure the content will be ever in the centered:
body { min-height: 100vh; margin: 0; padding: 0; padding: 2rem; display: flex; justify-content: center; font-family: "Poppins", sans-serif; background-color: hsl(200deg, 100%, 99%); align-items: center; }
Hope this helps, keep it up =)
Marked as helpful1@debriksPosted about 2 years ago@correlucas Thank you again for the feedback Lucas! Yes I noticed that I had a problem with alignement but I thought I had fixed it but probably not for all screens. I will apply your corrections. Thank you! Youโre the best! โจ
1
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