hi there! 👋
It's better to use min-height instead of height. height will prevent users on smaller screens to scroll down if your content is overflowing the 100vh at that screen size. using min-height will center your content, but will still allow users to scroll down in case of overflow.
Marked as helpful
@joshuapoc
Posted
@kodan96 Thanks for your comment. So will min-height alone fix the overflow problem?. Im working on the omelette recipe challenge and i applied a media query and it seems to work just fine. The problem is the content overflows when i set the width of the portview in the dev´s tools to 200px and below. I implemented overflow-x: hidden; but i believe it will be counterintuitive later on.
@joshuapoc
I don't think you need to go that far down in screen sizes. I think 375px should be fine for the smallest screen size
Marked as helpful
@joshuapoc
Posted
@kodan96 Well yes i thought the same. The project itself didnt give me any problems and its responsive as expected. Also i set height: 100vh in the body. The only difference i noticed was the main container being cropped, i solved it by setting height: 100% on the body, but maybe thats wrong...is that why you say min-height is preferred? so that the "cropping" doesnt occur?
@joshuapoc partly, yes
Marked as helpful
