@LegendaryGhost
Posted
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;
}
@Tobaunta
Posted
@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?
@LegendaryGhost
Posted
@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 helpful
