html - Changing media screen makes div overlay -

i using bootstrap , divs 4-columns each (col-md-4). based on bootstrap 12-columns means in pc media screen 3 divs @ each row. below 991px it's standard each 4-columns covers whole screen. please see screenshot:

however, want 4-columns cover 50% of screen when screen size between 600px , 990px. meaning there 2 divs @ each row. have succeeded in, there issues.

when loading page @ mobile portrait (approx < 530px) loads correctly. div not overlay each other.

when loading page @ mobile landscape, or ipad portrait (approx > 740px) loads correctly. div not overlay each other.

when flipping screen either mobile portrait mobile landscape or opposite it's starting act strange. divs overlaying each other.

the effect want has been adding using following css:

@media screen , (min-width: 991px) , (max-width: 1200px) { #isotope-list img { height: 100%; } }  @media screen , (min-width: 600px) , (max-width: 990px) { #isotope-list .col-md-4 { width: 50%; } #isotope-list img { height: 100%; } }  @media screen , (max-width: 599px) { #isotope-list img {  height: auto; }} 

when removing css goes standard bootstrap , there no divs overlaying each other. means there must wrong connection between css , bootstrap. meaning there should add prevent happening.

the site can found here: http://goo.gl/9istil

here html/php if needed:

<div class="col-md-12">     <div id="isotope-list">                 <div class="item col-md-4">                  <div class="content grid lefttext">                     <figure class="effect-lily">                         <!-- image -->                         <figcaption>                         <!-- caption -->                         </figcaption>                                </figure>                      </div>              </div>         </div> </div> 

edit: script may interfare css: http://goo.gl/nnlwgo

edit 2: following when going portrait landscape in android browser on mobile:

reason have set height: auto on img when screen goes lower 600px.

your code:

@media screen , (max-width: 599px) {   #isotope-list img {     height: auto;   } } 

so when isotope rearrange elements, won't know image sizes cause miscalculation of positions.

to fix remove height: auto remove max-width being set on .grid figure img remove ugliness during transition.

@media screen , (max-width: 599px) {   .grid figure img {     max-width: none;   } } 

the problem left image exceed width of it's container, can see in image below.

what can think fix have use of isotope events when finishes arranging elements, add class images , set max-width: 100%.

e.g.

var $grid = $('#isotope-list').isotope({...});  $grid.on( 'arrangecomplete', function( event, filtereditems ) {    $(".grid figure img").addclass("imgarranged"); }); 

then on final media query have this:

@media screen , (max-width: 599px) {   .grid figure img {     max-width: none;   }    .grid figure img.imgarranged {     max-width: 100%;   } }  

update - adding js stuff

the settings isotope can found here, when using isotope events, appropriate write there.

in case add this:

  // add class when transition finished   $container.on( 'arrangecomplete', function( event, filtereditems ) {     $(".grid figure img").addclass("imgarranged");   }); 

that file should now:

jquery(function($) {    var $container = $('#isotope-list'); //the id list blog posts   $container.isotope({ //isotope options, 'item' matches class in php     itemselector: '.item',     layoutmode: 'masonry'   });    // add class when transition finished   $container.on( 'arrangecomplete', function( event, filtereditems ) {     $(".grid figure img").addclass("imgarranged");   });    //add class selected item clicked, , remove others   var $optionsets = $('#filters,#filters-undercat'),     $optionlinks = $optionsets.find('a');    $optionlinks.click(function() {     var $this = $(this);     // don't proceed if selected     if ($this.hasclass('selected')) {       return false;     }     var $optionset = $this.parents('#filters');     $optionsets.find('.selected').removeclass('selected');     $this.addclass('selected');      //when item clicked, sort items.     var selector = $(this).attr('data-filter');     $container.isotope({       filter: selector     });      return false;   });  });