How to apply max-height to a 100vh hero element?
I have a simple hero element that takes up the entire screen using height: 100vh. However, I don't want it to exceed 800px, so setting max-height: 800px seems like a logical solution. But it doesn’t work—on smaller screens (where the viewport height is less than 800px), the hero element doesn’t fill the screen.
demo: https://codepen.io/noobcoder137/pen/pvoRbbz
16 Replies
Works perfectly fine for me...
ewww whats going on why it does not work for me
Yeah that's strange... Hard to say what's going on when the issue doesnt appear for me
But you can try the
svh unit instead
that is what you should be using anywayoh apparently if i change to mobile it will not work, it i change to desktop it will work, but I have already checked on my iphone and it does not work
Well, use svh unit and use em/rem rather than pixel. that should fix the issue
But try hover over the hero div to see what height it gets
ok I found my mistake, the first image I post its an iphone 2, which has a resolution of 1334 × 750 Pixel, 1334px would be the height, and I set max height to 800px, thats why it cant fill on mobile
Alright great that you found the issue 🙂
You could apply the max() function ! It looks at which value is larger
height: max(100svh, 800px)
Also i have found on some websites and applications , when using responsive mode in the browser , making changes the the screen size of aspect ratio doesn’t update in real time; I’ve found sometimes I have to adjust the aspect ratio and refresh the page
EDIT: min() not max()
https://discord.com/channels/436251713830125568/1345052184508633153/1345131087550218312I think you meant
max(100svh, 800px) not height(100svh, 800px) 🙂
Also, just like you said, it will use the larger value, so it will be 100vh aslong as the screen height is greater than 800px, if screen height is smaller than 800px, then it will be 800px height.
From my understanding, he want to cap it and 800px so it can never get larger than 800px, but if it gets smaller than 800px, it should be 100vh/svh.
So in this case he should use the min() function 🙂Thank you yes I mean height:
max(800px, 100svh) . My brain is mush apparently .
I must’ve read too fast , I thought OP wanted whichever was largerYeah hehe, it's fine 🙂
They do say they don’t want it to exceed 800px but then also say that it doesn’t fill up the screen . So I’m not sure.
But OP whichever you want max() or min() should help
Yeah from my understanding it did not fill out the whole screen when the height was smaller than 800px in height, and then it shoiuld fill the whole screen because then the height should be 100vh/svh
Aha I see it now, we are looking at the case the screen is less than 800px then it should be 100vh - not in the case that the screen is more than 800px in which case the el should only be 800px .
Thanks for the clarification- you are very correct that min() would be the one 😆
Yeah haha 😀 👍