Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Proof Section Master Solution

Samantha 30

@samanthascarcella

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was a good challenge to learn how to better use Flexbox and nest them as well. Overall, I believe I did a good job and do not have any questions or concerns. Any and all constructive criticism is welcome:)

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Samantha, well done on this challenge, and I believe you did great also. Your code is clean and easy to read, and I like how you used descriptive names for your classes. I just got two quick suggestions:

  • Right now there's some empty space at the bottom of the page at desktop view; usually we don't notice this when we use a background color but since you're using an image, that empty space is quite noticeable. To fix that, just add min-height: 100vh to your body tag and the background image should cover the whole page.

  • Instead of using fixed widths (e.g., width: 340px) try responsive properties such as min-width, max-width; I like to use width: min() and clamp() also, which I find super useful when you want to have both min and max widths in one property.

Hope to see more great work!

Marked as helpful

0

Samantha 30

@samanthascarcella

Posted

@elaineleung Thank you so much! That was incredibly helpful. I will have to start playing with the min() and clamp() and update my code accordingly:)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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