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

Social proof section, mobile-first responsive with CSS Grid & Sass

Laura 30

@lauradotcom

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Between about 1058px and 1440px (a little beyond), the three purple boxes look flush. Is there a better technique I could use to maintain the staggered effect, or did I just implement it incorrectly?

Community feedback

Mark Mitchell 1,820

@markup-mitchell

Posted

The reviews section is shrinking vertically to the height of the content at those viewport sizes. The more height it has the further apart the flex-start and flex-end positions are for the cards to occupy.

Kinda hard to explain! give main .reviews height: 500px in devtools and you'll see what I mean.

1

Laura 30

@lauradotcom

Posted

That makes sense. I thought maybe there wasn't enough room for the alignment to have an effect but wasn't sure what to do about it. I'll give it min-height: 500px and that should fix it! Thanks :)

0

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