I need help vertically aligning content in my divs

1

So I’ve made it so my 4 main divs are 100%, 80%, 80% and 100% tall on my portfolio page: https://codepen.io/ChampCoder/pen/qXxMjN.

Clearly, from taking a look at the codepen, it looks terrible when the monitor isn’t 1920x1080.

My end goal is to have the actual content to be perfectly centered both vertically and horizontally within their respective divs, and have it all be responsive.

I’ve really been trying to figure out a solution for myself and searching for it, but I have neither found something that works or something I can understand well enough to implement it.

Thanks

2

This Stackoverflow Answer is what I generally go by when vertically divs on a page. Does this accomplish what you’re looking to do?

4

I checked this one out, but could not figure out where to put what in order to make it happen. I tried various ways, but nothing worked out. I tried it out in another pen, without any of my content, and it worked. So I really don’t know what to do.

5

It’s only aligned because I have manually padded the top of each div. When looking at the site from my phone, it’s completely mixed up, and the content leave their divs. Would centering it in the div, not fix that?

6

Have you considered using bootstrap and it’s grid system? Writing sites for mobile phones can be tricky and bootstrap grids can help with that.

7

The rows, and col-md-6 and stuff? That I have tried my hands on, but I realized (at that time) that I didn’t even really need it.

Maybe I should look into it again.

Thanks :slight_smile:

1 Like