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 Page using CSS Grid and Flexbox

arey 350

@arey-dev

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


Any comments/advice regarding the work will be greatly appreciated. :)

Community feedback

Account Deleted

Hi Arey,

This looks great, well done! 😊 Here's two things I'm seeing:

-The mobile layout kicks in at too small a width - The screen has to get small enough that the desktop layout cannot fit in its entirety anymore, so you get an horizontal scrollbar. I would edit the media query to make it so that it switches to the mobile layout before the desktop layout can't fit anymore.

-The ratings-flex containers are not centered on the mobile layout from about 515px to 460px screen width. I wasn't sure if you intended for this or if you wanted them centered/taking all the available space. I think it looks great the way you currently have it, but figured it was worth mentioning 😊

Marked as helpful

1

arey 350

@arey-dev

Posted

@LazyDuckling Thank you. One of my struggles was the scrollbars. I managed to get rid of the vertical scrollbar, but maybe I forgot about the horizontal one. I'll do what you suggested 😊. As for the ratings-flex container, I didn't want to center the flex items immediately, because if I did, the container would look so stretched as its width is set to 100%. Still, thanks for mentioning.

Happy Coding 😊

0

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