Skip to content
Submitted over 2 years ago

Responsive Social Proof Section using CSS Grid and Flexbox

riverCodes•300
@riverCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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
    @gcnwPosted over 2 years ago

    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
    @riverCodesPosted over 2 years ago

    @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

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