Website page squeezing affects text frame

Question

Could someone help me out with a suggestion on this fixing the text frames on this wordpress website page http://www.blackcoatinnovations.com/#third

The formatting looks well if the browser is the right size but as soon as you make it smaller, the text frames and picture become squeezed.

It is interesting to note that if you squeeze it A LOT, then the text frames change orientation and go one above the other and this is what it looks like on a smartphone so if possible I don't want to destroy this mobile friendly feature. But is there a way to avoid that "in between" situation where the text frame is messed up?

Answer 1

This is because it's responsive and will adapt percentage wise to the available screen space. If you look at your Bootstrap css file here: http://www.blackcoatinnovations.com/wp-content/themes/BootstrapParallax/css/bootstrap-responsive.css, you can set where that responsive trigger should happen.

So you have there @media (min-width: 768px) and (max-width: 979px)

It mean until it reaches the width of 767 (one less than the min width), it's going to squeeze and then as soon as it reaches 767 - go to phone layout. If you set you min-width higher on this line and your max width higher on the next media query, you could get it to snap where you want it to.

There are other ways, but this would be a quick fix.