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 Social Proof Section using CSS Grid and Flexbox

riverCodes 300

@riverCodes

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


Any Feedback is Appreciated. I don't like how the desktop design collapses as screen-size decreases (1200px and lesser until it hits the media query). The stars wrap around to a new line and I would like to avoid that. I would like the spacing (column-gap) between the top-two sections to decrease instead. If anyone has any advice on how to achieve that, please let me know! :D

Community feedback

Gary 210

@gcnw

Posted

You didn't specify a width of your star container so it flexes with the size of the view. Something like below fixed it for me.

.star-container { width: 200px; }

Marked as helpful

0

riverCodes 300

@riverCodes

Posted

@gcnw oh yeah! I had set the width to be a percentage of it's parent. That makes sense thanks!

1

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