How do I fix weird offsets in bootstrap columns - css

Question

How do I make my pictures be aligned in the center when the screen shrinks to small to keep them side by side? I tried using columns, but it has a weird offset and it won't scoot to the side or align in a straight column when needed.
Here is my code:
<h2 class="text-center h2">Recent Projects</h2>
</div>
<div class="pics col-md-4 col-md-offset-2 col-xs-10 col-xs-offset-1">
<a href="350_project.html">
<img src="images/IMG_2579.JPG" width="450" height="350">
</a>
<h3 class="text-center">350 Project</h3>
</div>
<div class="pics col-md-6 col-md-offset-1 col-xs-10 col-xs-offset-1">
<a href="silk_screening.html">
<img src="images/IMG_0978.JPG" width="450" height="350">
</a>
<h3 class="text-center">Silk Screening</h3>
</div>
<div class="pics col-md-4 col-md-offset-2 col-xs-10 col-xs-offset-1">
<a href="compost.html">
<img src="images/IMG_7793.JPG" width="450" height="350">
</a>
<h3 class="text-center">Food Feud</h3>
</div>
<div class="pics col-md-6 col-md-offset-1 col-xs-10 col-xs-offset-1">
<a href="terracycle.html">
<img src="images/Official_TerraCycle_Logo.png" width="450" height="350">
</a>
<h3 class="text-center">TerraCycle</h3>
</div>

Answer 1

You could use #media queries, making your div having something like "margin: auto" at a certain screen size or with a global parent div with "text-align:center".
Don't forget bootstrap grid item have a default "float:left" attribut, maybe you'll have to change it with #media queries.
I used it in my last project. I don't know it my objectives are compatibles with yours but it could help you.
<div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="clear"></div>
<div class="container_losange container_losange_mission float_none float-right col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
<div class="container_losange container_losange_mission float_none float-left col-lg-4 col-md-4 col-sm-4 col-xs-8"> //content </div>
Then here I have 3 + 2 divs. The 2 last divs are center in the page because I make some modification :
.section_mission {
text-align: center;
.container_losange_mission {
display: inline-block;
&.float_none {
float: none;
}
}
float-right and float-left are just here for the specific design of the mobile view. (to have a "staggered" structure)
The clear div doesn't seems to be needed, I didn't remember why I used it.
/* Extra small devices (Phones (<768px)) */
#media(max-width:767px){
.section_mission {
.container_losange_mission.float-right { float: right !important; }
.container_losange_mission.float-left { float: left !important; }
}
}
I don't know if my explications are usefull for you because I'm not sure it'll works with random number of elements..
If not, have a look on the CSS3 new functionnality FLEX:
http://the-echoplex.net/flexyboxes/
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Could be usefull on this type of problem