Overflow
Hi everyone,
Im trying to make a portfolio with some projects.
I wanna make a "one pager", so when you scroll down each project description will have "its own" page.
But when I try to make it responsive it overflows.
Im using 100svh for height. Normal I use 100vh, but that is apparently not the right way š
When adding 100svh to my media query, it does work.
Ive tried so many things and I cant seem to figured it out š
This is my CSS.
https://codepen.io/Gv3-Flyver/pen/MWxvPNj
Please let me know if you need anything else š
Thanks in advance š
6 Replies
Are you using
height or min-height?im using
height: 100svh;So that's why it's overflowing because you're giving it a fixed height and saying "you can only be this tall. Personally and conventionally using heights is a no no in css because of this exact issue. Even min-heights aren't great but sometimes you need them if your content and padding isn't large enough. Reexamine if you need it or not, if you decide you do , make sure to use
min-height: 100svh; min-height:100vh;
as a fallback for browsers that may not recognize 'svh'@clevermissfox
Okay thanks I will try that š
But "Personally and conventionally using heights is a no no in css" .. It totally make sense what you are saying, but how can I make it so each project has it own "page", when scrolling down?
You can use the content and padding to make up the height, or if it must be only the height of the viewport , then it would be appropriate to use min-height or min-block-size
Okay thanks š
I will try it out.
Or im just gonna redesign my idea š