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
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/68c4ec2b734586d727a6d610923a0546Shit! 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?