Skip to content
Submitted over 2 years ago

Mobile first design with plain CSS and Flexbox

Florian Stăncioiu•610
@florianstancioiu
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

Any feedback is appreciated!

I have some problem with the bottom background image for the desktop, even though I position it using background position to the bottom of the page, the image remains positioned with 50px up from the bottom. I used min-height:100vh on the body element and it works but I get a scrollbar.

Community feedback

  • Irina Lagutina•490
    @FoxMalder-coderPosted over 2 years ago

    One of posible solution is:

    1. Reset margin on body. Make it min-height: 100vh.
    2. Set just padding-top to main. Any other margin exept margin-right: auto and margin-left: auto set to 0 or not install at all. The other one:
    3. The same. And make body flex with center align and justify.
    4. Set all margin and padding for main to 0.
    1
    Florian Stăncioiu•610
    @florianstancioiuPosted over 2 years ago

    @FoxMalder-coder Thanks for your input, I actually made it work by setting height: 100% on the html tag and I removed the height: 100vh from the body tag. The scrollbar is gone and now the bottom background image is placed correctly.

    0

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