@leandrorodrigues00
Posted
Hello @TianYeCal !!
The reason for this is that when you use heigth:100vh, you are imposing on the browser that the element will be the size of the available viewport.
When you get to mobile screens, the layout breaks down, because you make everything inside the main to occupy only the space that is visible in the user's browser.
To resolve this unwanted behavior, you can use the min-height:100vh tag to ensure that the element occupies the entire screen, but can move off the screen if necessary.
Notice how the height of your site looks like on mobile devices with these 2 properties:
height: 100vh ==== 540w x 929h
min-height:100vh ==== 540w x 1385h
I hope I was able to help! :)
Happy coding !
Marked as helpful
@TianYeCal
Posted
@leandrorodrigues00 thanks! just started to practice, feeling like long way to go, thanks for the help!
