Design comparison
Community feedback
- @LegendaryGhostPosted 3 months ago
Great job ! 🎉 Everything is super accurate but the whole page doesn't appear on screens with small height because you've set the main wrapper's height to 100vh. I'm not sure why you did it but I think you should remove this line :
main { /* ... */ height: 100vh; }
0@TobauntaPosted 3 months ago@LegendaryGhost
the main height is set to 100vh to center the flexbox vertically as well, I dont know why content is getting cutoff on smaller height screens because 100vh should be 100% of the viewheight witch should always be the same?
0@LegendaryGhostPosted 3 months ago@Tobaunta
As you said 100vh is 100% of the view height so it's not always the same. It means on a 4k screen it will be 2160px and let's say 920px on smaller screens for instance. Since the height of the main container is set to 920px on smaller screen, it's content has to go inside and if its height is greater than the main's height like 1200px for example, then it will overflow. The issue is the browser considering that main isn't bigger than the screen so it doesn't need a scrollbar. No scrollbar, no scrolling and the overflowing content is hidden.
Marked as helpful0
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