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

@Quake-Silver

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


All feedbacks are welcome

Community feedback

@VCarames

Posted

Congrats @Quake-Silver on completing this challenge!

Adding to what was mention above, to prevent you content from expanding indefinitely when the screen size expands, you want to add a max-width of your choice to the <main> element

Around 951px screen size, you may want to add media query to clean up the layout. Since flex-wrap takes effect, your content just wraps down in its default styling.

Marked as helpful

0
David 8,000

@DavidMorgade

Posted

Hello Ogunya, congrats on finishing the challenge!

If you dont mind, I would like to give you some feedback.

Your project seems great but seems that need to get centered, half of the screen seems to don't get any type of content, you should set your body min-height: 100vh to make your body take all the screen and then position your main directly with flex:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

With this it will look a bit more centered like in the solution!.

Then try to give a bit more of size to your fonts on desktop mode, for example the span that you used for '10.000+ of your...' could perfectly an h1 with like 20pxs more of font-size, don't worry about this things, you will get more used to sizing different things with practice but take it into considerations!

Hope my feedback helps you, if you have any question, don't hesitate to ask!

Marked as helpful

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