responsiveness for with heights
hey, how do you guys deal short vh devices, i have a laptop with short vh and i always get the same problem with content overflowing to the bottom, with other screens (large) that i use everything is fine, any suggestions?
11 Replies
don't use vh
easy fix 😄
Let your content be free!!
best to use 100% with dvh/svh/lvh fallback imo
min-height too .. if you are setting strict heights you are just asking for trouble even without vh unit.
i didnt set a vh tho
this is my screen
this is how it should be
GitHub
GitHub - Walid-MHC/Nike
Contribute to Walid-MHC/Nike development by creating an account on GitHub.
You can use the same media queries that you would use for screen width as for screen height. However the screenshots you have shared only have minor differences and isn't something to worry about, either the screen is only slightly short and things are fine or they're a landscape mobile with the tab bar open and you can't expect that it would be good.
The best thing is just to avoid unbounded usage of
vw as that will end up being issues for high aspect/ultra-wide monitors.Also don't go chasing pixel perfect for every screen size... that is a pipe dream and or a gigantic waste of time imo.
If its viewable in a good maner/good UX... then its fine.
I'm saying this because I don't see an issue with the above screenshots
The first screenshot is straight up shorter than the 2nd so even if you're matching it to the pixel it's going to look shorter on that screen.
I agree it looks a bit too big on that screen size so maybe introduce a bit of fluid sizing on that h1 to compensate
"should" look like is relative
You could just lower the heading size too yea 👍
but then you again are chasing dragons
Also imo this is a design issue; if you want the social proof to be above the fold then you might want to look into putting it somewhere else (eg on the right) instead of straight down. That should at least solve the issue for desktop, but yea for mobile you're going to run into the same issue anyway so I wouldn't worry about it too much
i appreciate the help guys , thanks a lot! 🫡