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
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
11 Replies
Why not just use:
As in instead of min-height?
I want the section to take up all of your screen up until some max height for stylistic reasons, I think it looks nice when this takes up everything with the scrolling bar at the bottom
Now that I think about it I guess I just want a
@media (min-height: ????) that changes min-height: 100vh to something else
But if someone has a better solution pleaes sharemin-height will make sure the container height starts growing from the value you gave it.
max-height will make sure the contain height doesn't grow byeond the value you gave it
Min height overrides max height unless I'm mistaken. Anyway having both doesn't work, it's still always the screen size
i think you want it to be 100vh for mobile screens? if so yes, use the media query
I want it to be
height: clamp(fit-content, 100vh, 2000px). 100vh until 2000px with min height of contenthttps://codepen.io/ThatMartianDev/pen/KKLpgqe
sorry, I think better to use initially, and then in the media query change it to max-content
ty
Yw
Btw I love your text slider 🤌
thanks, made the way Kevin showed it in https://www.youtube.com/watch?v=iLmBy-HKIAw
Kevin Powell
YouTube
Create an infinite horizontal scroll animation
🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...