Смена экрана мультимедиа делает div overlay

Question

Я использую Bootstrap, а divs - 4 столбца каждый (col-md-4). На основе Bootstrap с 12-столбцами это означает, что на экране ПК-носителя это будет три divs в каждой строке. Ниже 991px стандартно, что каждый 4-столбцы охватывают весь экран. Пожалуйста, смотрите скриншот:

Однако, я хочу 4-колонки для покрывают только 50% экрана, когда размер экрана между 600px и 990px. Это означает, что в каждой строке есть два div. Это то, чему я преуспел, но есть некоторые проблемы.

При загрузке страницы на мобильный портрет (приблизительно < 530px) все загружается правильно. Div не перекрывает друг друга.

При загрузке страницы в мобильном ландшафте или Ipad портрет (ок> 740px) все, что нагрузки правильно. Div не перекрывает друг друга.

Когда листать экран от любого мобильного портрета на мобильный пейзаж или напротив него начинает действовать странно. Разделы явно накладываются друг на друга.

Эффекта я хочу еще добавлял с помощью следующей 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; }} 

При удалении этого CSS он восходит к стандартному Bootstrap и нет дивы перекрывающей друг друг. Это означает, что с моим CSS и Bootstrap что-то не так. Значит, я должен добавить что-то, чтобы это не происходило.

На сайте можно найти здесь: http://goo.gl/9IsTIl

Вот HTML/PHP, если это необходимо:

<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: Сценарий, который может interfare с помощью CSS: http://goo.gl/NnLwgo

Редакция 2: Th это будет следующий я получаю при переходе от портрета до пейзажа в браузере Android на мобильном:

Answer 1

Причина в том, что вы установили height: auto на img, когда экран становится ниже 600px.

Ваш код:

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

Поэтому, когда изотоп переставлять свои элементы, он не будет знать ваши размеры изображения, которые будут вызывать просчет позиций.

Чтобы исправить это, удалите height: auto, затем удалите max-width, установленный на .grid figure img, который устранит уродство во время перехода.

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

Проблема заключается в том, что изображение будет превышать ширину его контейнера, как вы можете видеть на изображении ниже.

Что я могу думать, чтобы исправить это, чтобы иметь хорошее использование isotopeevents поэтому, когда он заканчивает компоновку элементов, вы добавляете класс к изображениям и установить его с max-width: 100%.

например.

var $grid = $('#isotope-list').isotope({...}); 

$grid.on('arrangeComplete', function(event, filteredItems) { 
    $(".grid figure img").addClass("imgArranged"); 
}); 

Затем на вашем окончательном запросе СМИ должны будут выглядеть следующим образом:

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

    .grid figure img.imgArranged { 
    max-width: 100%; 
    } 
} 

Update - Добавление материала JS

Настройки для вашего isotope можно найти here, так при использовании событий isotope было бы уместно написать его там.

В вашем случае добавьте это:

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

Этот файл должен выглядеть, как это сейчас:

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; 
    }); 

});