I am having a little trouble with CSS

1

I created a portfolio website, uploaded it to github pages, got myself a custom domain and thought that I was smooth sailing! Much to my despair I came to discover that some of my styles did not act the way that I intended. My main issue has everything to do with the main description section of my site. It collapses into the next div at certain heights, looks bad on mobile and generally just does what ever it wants. I have a basic knowledge of css, but I know there are some missing links to my style skills. Can anyone tell me what I need to know to make the description fully responsive and unable to break anything else on the page? I will provide a link to my site here: http://www.coreyslaven.com/

here is a link to my github repo: https://github.com/purpledrumsticks/portfolioSite

2

@media screen and (min-width: 1242px){ .portfolioImages{ margin-top:200px;} }
ok for me at full screen on my work computer this causes the bottom (red place holder) to be half on screen half in footer … Strange thing is when i go to dev tools and look with the different size screen option set it dose not happen … in fact looks fine in all even in mobile even for the tiny apple 4s … but if i go out of dev tools and just resize my window see a few problems eg main text over flows at narrow width and height …
my thoughts would be that bootstrap and media queries are getting muddled but im no expert so will leave that to someone more qualified to say

3

I think it’s the “padding” on “fullDescription” p tag that is causing the trouble. Try another method to vertically align it.

For some reason I can’t add links to show you how.
Search google for “vertically center div” and read some stackoverflow answers.

4

Hi at home now and looking at it again on my laptop … on my laptop i dont have the above issue even if i manually adjust my window …
looked at the text problem and think if you change the 200px padding you have in the media query to 10% gives a better result (should probably change the other padding ones for the different break points as well) plus give a padding to the sides of 20 px so have . fulldescription padding: 10% 20px; and maybe reduce font-size back to 2.7em … what gets me is it messes up when i resize my window but when i run it through dev tools and the different display sizes it show fine no problems really.

5

Thank you both so much for replying! I made some changes to the styles and I have developed a product that I am happy with for the time being. Your suggestions helped me x 1000000. I found this website: http://howtocenterincss.com/
It is certainly a game changer for my styling abilities. Let me know what you may think about it. Thank you again and happy hacking! :sunglasses: