Min height of content, preferred of screen with max
I'm making a landing page and I want the first section to take up full screen (or more if needed for content and padding) but also have some kind of max height, it can be a fixed number or something related to screen width if it works (like
I made a codepen and at the moment it has
However, if I zoom out (screenshot 2) then it still takes up all of the screen (as expected with 100vh) and I really don't want that to happen. Is there a way to do that? I tried something like
Here's a link to codepen
https://codepen.io/asasinmode/full/OJYVNVE
max-height: 150vw) but at the moment I can't come up with anything.I made a codepen and at the moment it has
min-height: 100vh on the first section and in screenshot 1 you can see it works as intended, it also grows to more than 100vh if the screen is smaller than content+padding.However, if I zoom out (screenshot 2) then it still takes up all of the screen (as expected with 100vh) and I really don't want that to happen. Is there a way to do that? I tried something like
height: clamp(???, 100vh, 2000px) but I'm not sure what should go into the first argument of clamp, like ideally I'd want something like fit-content but it doesn't work.Here's a link to codepen
https://codepen.io/asasinmode/full/OJYVNVE
