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 🙂
No description
6 Replies
clevermissfox
clevermissfox•11mo ago
Are you using height or min-height?
Gv3-Flyver
Gv3-FlyverOP•11mo ago
im using height: 100svh;
clevermissfox
clevermissfox•11mo ago
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'
Gv3-Flyver
Gv3-FlyverOP•11mo ago
@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?
clevermissfox
clevermissfox•11mo ago
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
Gv3-Flyver
Gv3-FlyverOP•11mo ago
Okay thanks 🙂 I will try it out. Or im just gonna redesign my idea 😅
Want results from more Discord servers?
Add your server