Design comparison
Solution retrospective
The only thing is about the responsive setting, if I set the main with 100vh height when I changed to mobile width, the website can't show all the whole picture
Community feedback
- @leandrorodrigues00Posted almost 2 years ago
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 929hmin-height:100vh
==== 540w x 1385hI hope I was able to help! :)
Happy coding !
Marked as helpful0@TianYeCalPosted almost 2 years ago@leandrorodrigues00 thanks! just started to practice, feeling like long way to go, thanks for the help!
1
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