Yeah it’s the absolute positioning on #quote that’s giving you trouble. My suggestion would be changing that to relative (see the new styling below) and then you can move that quote element up with a good old negative top margin.
margin: -50px auto 0 auto;
I believe that also fixes your mobile display issue. The problem there was also the absolute positioning combined with the 540px top position.
I did notice that on smaller displays “Company Name Here” pops out of the containing div…for that I’d remove the
height: 130px; style and let the div grow in height naturally as the screen shrinks down.
EDIT: Should mention you could technically keep that absolute positioning on the quote element, but you have to add position: relative to an element that contains it. Basically what absolute positioning does on an element is to take it out of the flow of the page. It unstacks it. I don’t know if you ever played Jenga, but think of it as pulling a block from the tower and then placing it on the table instead of back on top of the tower. It’s now hanging around on its own in the window.
Now if we wrap that whole tower in relative positioning, that absolute block remains with the tower and you can move it anywhere within it. Which is handy when you want to position something at the very bottom of a container div. For example a button or a link.
That was a terrible explanation I know
Check out this: https://css-tricks.com/almanac/properties/p/position/ it might explain the different types of positioning (including absolute inside relative) way better than I can. Also, CSS Tricks is an awesome site for styling tips and methods. I’ve used it many a time for reference on how to do certain things.