Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive grid and flexbox based results page

P
Navine 210

@rainSax

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I found it a little bit tricky to style the cards in a way that the white of the summary card extends past it's edge and seemingly behind the results card. To create this effect i made the summary card 2x the length of the results card and placed it behind the results card using z-index. I also had to reduce it to 1x the length of the results card when switching to mobile view. I found grid very helpful in easily changing the rows and cols when i got to this point.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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