Skip to content
Submitted about 4 years ago

Social Proof using Flexbox (mobile-first)

Josh Prentice•235
@jfprentice
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

I probably took too long trying to get everything right (though I know it isn't perfect). First time trying mobile-first - not sure if I did it correctly. If anyone could give me feedback on my usage of flexbox that would be great. I also wasn't sure of how to use the provided top and bottom background images - any tips or direction on that would be greatly appreciated! Any other tips/critiques would also be awesome.

Thanks for looking!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    Hey, Josh Prentice!

    Nice work! 👍

    I'd suggest transitioning to a mobile-friendly layout slightly earlier to avoid having the testimonial boxes look too squished right before the layout changes. Also, between, 900px and 1440px, I think adding some left and right padding to the boxes with the stars and reviews would look nice.

    You are definitely using flexbox to your advantage in the layout of your site (which is cool!). That makes it easy to switch from row to column-based layouts in a media query!

    As for the background images, you can easily add them to your page right in your CSS by using the background property and the url() function. You can then use other properties such as background-size and background-position to determine the size and position of those images.

    Check out these two links for more!

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders https://css-tricks.com/css-basics-using-multiple-backgrounds/

    Keep coding (and happy coding, too!). 😁

    1
    Josh Prentice•235
    @jfprenticePosted about 4 years ago

    @ApplePieGiraffe Thank you for checking out my solution! I definitely agree about transitioning earlier - I'll go back and make some changes based on your suggestions. Thanks again!

    0

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