Struggling with alignment and body height of my portfolio

Struggling with alignment and body height of my portfolio
0

#1

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.


#2

can you explain the problem a bit more? I’m not sure what is meant by “y axis overflow”…


#3

i didn’t quit understand your question, do you mean you have a weird horizontally alignment behavior?


#4

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?


#5

Body height is scrolling past the background. If you scroll on the the pen, it will scroll way past the background of the body.


#6

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.


#7

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.


#8

Thank you. This is probably the issue. I will use grid instead of flexbox and see what the difference in responsiveness is.