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

P
Nickโ€ข 260

@nn-code80

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


Hi everyone,

I find that I'm still getting confused with width. When and where (e.g. in body or main) is it best practice to use width as 100Vw vs a percentage (like 100%) vs min/max-width?

Also, this was my first project using a "background-image," so I am not sure I did it right as I find the background moves around a lot. Any feedback would be appreciated. Thanks for the help!!

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

  • In the body/html element, neither of the two ways. The body element is a block-level element, so by default, it has 100% width, and from the projects I've seen, using width: 100vw generates an unnecessary horizontal scrollbar on some screens. So you can remove it.

    It's not necessary to use max-width or min-width on the body element; let it take up 100% of the screen by default. The internal elements are the ones that should have max-width to prevent them from stretching too much, as you currently have it.

  • You also don't need height: 100% on the body element, as you are using min-height: 100vh on the <main> element, and the height won't take effect.
  • The use of background is fine.

I hope you find it useful! ๐Ÿ˜„

Happy coding!

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