Problems with smaller screen layout causing pages to disappear into vertical negative space

Sandbox: https://codesandbox.io/s/focused-blackwell-ongpok I am having issues with my site. Once I switch to smaller screens and the site adjusts from my media queries... my About and Portfolio sections, which I want to just scroll, suddenly are disappearing up into the negative vertical space above the browser? Curious why this is happening and what I can do to fix it? Thank you!
2 Replies
Kevin Powell
Kevin Powell2y ago
Easiest solution is to remove the justify-content: center on the section selector. The reason that is happening is that the justify-content is centering everything vertically inside the available space it has, regardless of if there is scrolling or not. Flexbox has no idea if there is a scroll, it's just going "the height is 86vh and I my content is 200vh total, so I'm going to put the middle of that content in the middle of that 86vh". Then you add a scrollbar, but that top content is already gone. Here is an example that can help visualize it. You can comment line 8 in to add the scroll, and you'll see the content doesn't move. https://codepen.io/kevinpowell/pen/yLRQbwv/68c4ec2b734586d727a6d610923a0546
thehumanist
thehumanist2y ago
Shit! Thanks, Kevin! Didn't expect you to respond haha That makes complete sense. Just not something that clicked in my head when looking through all of that. I really appreciate the help! Any quick thoughts or advice on the layout or code you saw?
Want results from more Discord servers?
Add your server