Skip to content
Submitted over 3 years ago

Social proof section (Desktop First)

E.N.M•70
@EN-M
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 tried to make this more responsive for all screen sizes but I face some problems with really small screens. There is a "Section" element that is a child of the Body tag and if I give it padding all around in small screens(like iPhone 5 or galaxy fold in chrome developer tool) it doesn't apply(left and right padding). It's because of the size of the Section and other elements inside. I tried to fix it but couldn't, so I just let it be the way it was.

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, E.N.M! 👋

    Congrats on finishing another challenge! Your solution responds well. Here's my small suggestions:

    • You repeat your HTML code with stars images which is unnecessary. Find the way to use only one star image for a .stars. You can do it easily by using background-repeat approach in your css.
    • You have to change width to be 100% for .reviews and .card if you want to get rid of this small screens problem. Then you can apply padding 0 12px for example to body and your section won't be overflowing.

    Good luck with that, have fun coding! 💪

    1
    E.N.M•70
    @EN-MPosted over 3 years ago

    @tediko Thank you so much for your feedback. I really appreciate it.

    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