Left aligned div not centering on certain page sizes

Question

An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/

I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).

I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.

All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?

Answer 1

Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div: div{ width:100%; height:50%; } div{ width:100%; height:50%; }

Answer 2

Couple of things I would like to suggest:

1. If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
2. Now you want to make your website fluid, so take a look at CSS media query . This will help you to achieve responsiveness.

Happy Coding..