Bootstrap thumbnails messed up when locking large display settings

Question

Using Bootstrap 2.3.2 I used the following solution to lock my page, adapting to large display settings:

@media (min-width:970px) and (max-width: 2500px) { .container { width: 970px; } } 

... which works fine until I create thumbnails:

 <div class="container frame"> <h3>grid problems above 1200px</h3> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail">Thumbnail #1</div> </li> <li class="span4"> <div class="thumbnail">Thumbnail #2</div> </li> <li class="span4"> <div class="thumbnail">Thumbnail #3</div> </li> <li class="span4"> <div class="thumbnail">Thumbnail #4</div> </li> <li class="span4"> <div class="thumbnail">Thumbnail #5</div> </li> </ul> </div> 

There are three thumbnails per line, but when I extend the browser window to exceed 1200 pixels, the thumbnails are rebuilt and there are only two lines.

How can i solve this?

Do I need to override all those bootstrap .span tags?

This is my fiddle: https://jsfiddle.net/michi001/b7n1byvx/

Answer 1

Bootstrap has a CSS rule when you click 1200px, which changes the width of span4 elements from 300px to 370px.

So, in your css you can add a rule so that the "span4" elements remain at a width of 300 pixels.

 @media (min-width:970px) and (max-width: 2500px) { .container { width: 970px; } .span4 { width: 300px; } } 

Saves thumbnails 3 when crossing a threshold of width 1200.

Violin:

https://jsfiddle.net/b7n1byvx/2/