Resposive Social Proof Section using CSS Grid and Flexbox

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted over 2 years ago

  Hi Iwan Haryatno, how are you?

  You did a good job on this challenge, I have a tip that I think you will like:

  I saw that your layout is breaking 360px, you made a good responsiveness up to this resolution, but below 370px there are many devices that use this resolution, so it is a good practice to make your layout responsive to any device.

  I noticed here and what is making layout break is testimony-profile I advise you to use a media query and change display: flex; to use flex-wrap and make the layout as responsive as possible.

  Hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Iwan Haryatno•120

  @iwanharyatnoPosted over 2 years ago

  @AdrianoEscarabote Hi Adriano! thank you for your feedback! this will make me consider smaller screens and make my (current and future) webpage layout displays properly on smaller screen widths

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello IWAN HARYATNO, congratulations for your new solution!

  Answering your question:

  I've checked your solution and the background is yet well positioned. Something you can do is to use background-attachment: fixed and min-height: 100vh to make sure that the body will be ever displaying 100% of the screen height.

  👨‍💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/social-proof-section-pure-css-grid-custom-hover-states-KwSrl-Rjws

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Iwan Haryatno•120

  @iwanharyatnoPosted over 2 years ago

  @correlucas Hello Lucas! thank you for your feedback! This will greatly improve on how I set the background decors like this in the future

  0