Scaling down webpage on mobile causes rows to offset

Question

I am using Bootstrap on a webpage and am having problems with the rows scaling down to mobile.

The intended effect is for rows separated into 4 equal parts per row scale down to 2 equal divisions per row on Mobile Devices. This works well except for when the device goes below a certain width (approximately 335 px). Below that threshold, the rows get all messed up in some areas where the divisions are not horizontally aligned any longer.

Here is a link to the page so you can see what I mean.

• Keep in mind the problem is only on a very small screen size so you will have to shrink your browser window down to < 335px in width.

What exactly is causing this? And how do you think it can be fixed?

• For the HTML & CSS please follow the link to www.texasca.com/team.html

The markup and CSS seem to complicated/long to actually put into the question, but let me know if you want me to and I will do so.

Here is an image of the problem:

Thanks guys!

Answer 1

This looks like a float clearing issue. Try adding Bootstraps "clearfix" class to your divs. You can get more information about this issue here http://getbootstrap.com/css/#grid-responsive-resets.