I can’t, for the life of me, get the y axis overflow to fill the entire viewport. It used to work well until I added bounce from the animate.css library. I also used flexbox and I can’t seem to justify the text correctly on mobile. Can someone give it a look? Been struggling with this for days.
PS: I built this mainly from scratch. I had a portfolio template I used before but I wanted to build this myself.
can you explain the problem a bit more? I’m not sure what is meant by “y axis overflow”…
i didn’t quit understand your question, do you mean you have a weird horizontally alignment behavior?
What I mean is the vertical scrolling. It is scrolling past the body’s height. I’ve made the main class min-height: 100% , I’ve tried making the html selector height: 100% but nothing seems to work. Any suggestions?
Body height is scrolling past the background. If you scroll on the the pen, it will scroll way past the background of the body.
if you are sure your text should fit on one screen (to my eyes it looks too big to fit), you can add this to the body selector:
overflow: hidden;
but I think it is best to change all your font sizes to use a ‘vw’ ‘vh’ unit instead (you’ll need to add the relevant meta tag to the settings on codepen), if you want to mathematically make sure everything fits into the one page.
on further thought, I think you should consider using a grid for your page to make sure it stays responsive in addition to using the vw/vh settings to size the different sections.
Thank you. This is probably the issue. I will use grid instead of flexbox and see what the difference in responsiveness is.