Submitted almost 3 years ago
Mobile first design with plain CSS and Flexbox
@florianstancioiu
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
- @FoxMalder-coderPosted almost 3 years ago
One of posible solution is:
- Reset margin on body. Make it min-height: 100vh.
- 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:
- The same. And make body flex with center align and justify.
- Set all margin and padding for main to 0.
1@florianstancioiuPosted almost 3 years ago@FoxMalder-coder Thanks for your input, I actually made it work by setting
height: 100%
on the html tag and I removed theheight: 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 GitHubJoin 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