Design comparison
Solution retrospective
I am proud that I got the grids to work and feel like I understand it better. I hope to put this knowledge to use faster next time!
What challenges did you encounter, and how did you overcome them?Figuring out how to get the layout for the desktop view. I looked up how to use grid-area and was able to solve the problem.
What specific areas of your project would you like help with?I'm worried that the way that I got the cards to display in the desktop view is not the best way to do it. Open to any suggestions and help!
Community feedback
- @VishikaPosted 4 months ago
Fantastic solution! I also used
.card:nth-child(n)
to target the different cards instead of using class variants of.card
i.e.card--black
,.card--black-blue
etcYou've specified the grid positions to a very fine level of detail, personally I told certain cards to span, and gave some of them orders to achieve a look. This allowed me to use less CSS and give a couple more interim layouts between the mobile and desktop sizes suggested to make it more responsive
@media (min-width: calc(720em / 16)) { .testimonials { grid-template-columns: 1fr 1fr; } .testimonial:nth-child(1) { grid-column: span 2; } .testimonial:nth-child(4) { grid-column: span 2; } .testimonial:nth-child(5) { grid-row: span 2; } .testimonial:nth-child(3) { order: 1; } .testimonial:nth-child(4) { order: 2; } } @media (min-width: calc(1080em / 16)) { .testimonials { grid-template-columns: 1fr 1fr 1fr; } .testimonial:nth-child(3) { order: 3; } } @media (min-width: calc(1440em / 16)) { .testimonials { grid-template-columns: 1fr 1fr 1fr 1fr; } .testimonial:nth-child(3) { order: 1; } }
0
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