Cambiar la pantalla de medios hace superposición div

Estoy usando Bootstrap y los divs son 4 columnas cada uno (col-md-4) . Basado en Bootstrap con 12 columnas, significa que en la pantalla de medios de PC serían tres divs en cada fila. Por debajo de 991px es estándar que cada 4 columnas cubra toda la pantalla. Por favor, mira la captura de pantalla:

enter image description here

enter image description here

Sin embargo, quiero que las 4 columnas cubran solo el 50% de la pantalla cuando el tamaño de la pantalla está entre 600px y 990px. Lo que significa que hay dos divs en cada fila. Esto es algo en lo que he tenido éxito, pero hay algunos problemas.

Al cargar la página en el retrato móvil (aproximadamente <530 px), todo se carga correctamente. El div no se superpone entre sí.

enter image description here

Al cargar la página en el paisaje móvil, o el retrato ipad (aproximadamente> 740px) todo se carga correctamente. El div no se superpone entre sí.

enter image description here

Al mover la pantalla desde el retrato móvil al paisaje móvil o al revés, comienza a actuar de forma extraña. Los divs se superponen claramente entre sí.

enter image description here

El efecto que deseo ha sido agregado usando el siguiente CSS :

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

Al eliminar este CSS vuelve a la versión estándar de Bootstrap y no hay divisiones que se superpongan entre sí. Esto significa que debe haber algo mal con la conexión entre mi CSS y Bootstrap. Lo que significa que debe haber algo que pueda agregar para evitar que esto suceda.

El sitio se puede encontrar aquí: http://goo.gl/9IsTIl

Aquí está el HTML / PHP si es necesario:

 

Editar: El script que puede interconectarse con el CSS: http://goo.gl/NnLwgo

Editar 2: Esto es lo siguiente que obtengo al pasar de vertical a horizontal en el navegador Android en el móvil:

enter image description here

La razón es que ha establecido la height: auto en la img cuando la pantalla baja 600px .

Tu codigo:

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

Entonces, cuando el isótopo reordene sus elementos, no conocerá el tamaño de sus imágenes, lo que causará un error de cálculo de las posiciones.

Para solucionarlo, se debe eliminar esa height: auto luego eliminar el max-width se establece en .grid figure img que eliminará la fealdad durante la transición.

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

El problema que queda es que la imagen excederá el ancho de su contenedor, como puede ver en la imagen a continuación.

enter image description here

Lo que puedo pensar para solucionar esto es tener un buen uso de los eventos de isotope , de modo que cuando termine de organizar los elementos, agregue clase a las imágenes y configúrelo con max-width: 100% .

p.ej

 var $grid = $('#isotope-list').isotope({...}); $grid.on( 'arrangeComplete', function( event, filteredItems ) { $(".grid figure img").addClass("imgArranged"); }); 

Entonces en su última consulta de medios tendrá que verse así:

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

Actualización – Agregar las cosas de JS

La configuración de su isotope se puede encontrar aquí , por lo que cuando use los eventos de isotope , sería apropiado escribir allí.

En tu caso agrega esto:

  // Add class when transition is finished $container.on( 'arrangeComplete', function( event, filteredItems ) { $(".grid figure img").addClass("imgArranged"); }); 

Ese archivo debería verse así ahora:

 jQuery(function($) { var $container = $('#isotope-list'); //The ID for the list with all the blog posts $container.isotope({ //Isotope options, 'item' matches the class in the PHP itemSelector: '.item', layoutMode: 'masonry' }); // Add class when transition is finished $container.on( 'arrangeComplete', function( event, filteredItems ) { $(".grid figure img").addClass("imgArranged"); }); //Add the class selected to the item that is clicked, and remove from the others var $optionSets = $('#filters,#filters-undercat'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function() { var $this = $(this); // don't proceed if already selected if ($this.hasClass('selected')) { return false; } var $optionSet = $this.parents('#filters'); $optionSets.find('.selected').removeClass('selected'); $this.addClass('selected'); //When an item is clicked, sort the items. var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); });