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

Responsive Social proof section

@Wael-Orraby

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


If there are any ways you think the code could be better, I'm all ears! Your feedback means a lot to me.

Thanks a bunch! 😊

Community feedback

@david-tejada

Posted

Here are some observations:

  • You switch to desktop layout way too late. You seem to have taken the value of 1440px from the style guide. That's only the value the designer used to create the design. You need to use your judgment to estimate what the right breakpoint needs to be.
  • The page looks bad at large screen sizes. Try to set a max-width.
  • The top heading and paragraph are not centered in mobile layout. Using left and right margin of auto could be useful here.
  • The stars aren't aligned with the text in the desktop layout. In order to do this you can remove the bottom margin of the individual images and use the flexbox property align-items: center.

Marked as helpful

0

@Wael-Orraby

Posted

@david-tejada

Thank you for your valuable feedback! I appreciate your input and will certainly take your suggestions into consideration to improve the layout.

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