Skip to content
Submitted over 3 years ago

Social proof section - HTML, CSS, Flexbox, Grid

Roy•195
@royschrauwen
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 had a hard time with the positioning of all the objects, but in the end I made something that looks somewhat like the design.

I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is very welcome. 😊

Community feedback

  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    This is an amazing start @royschrauwen. I am happy for you.

    I have a few recommendations:

    • Avoid setting solid heights and widths, use min-height, max-height, min-width & max-width instead. For example on the container you can have something like this:

         min-height: 100vh;
   max-width: 50rem;
   margin: 0 auto;

    • On the example above I have used margin: 0 auto to centre content, it only works if you have set the width.

    • You don't need to set margin-top / margin-bottom on when using flex or grid layout, just use the gap property.

    Cheers.

    Marked as helpful
    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