Skip to content
Submitted 10 months ago

Social Proof Section

Nick•260
@nn-code80
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 10 months ago

    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

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