На определенной точке останова содержимое двух кладочных контейнеров на одной странице начинает перекрываться

Question

Я отображаю сообщения WordPress на странице индекса моего блога в макете кладки. У меня также активирована кладка в нижнем колонтитуле, чтобы отобразить виджеты нижнего колонтитула WordPress в макете кладки.

Так что в основном у меня есть 2 кладочных контейнера на одной странице.
1. Один для отображения сообщений в блоге, и
2. Другое для отображения виджетов нижнего колонтитула.

HTML-разметка для страницы выглядит следующим образом:

HTML

<!-- Posts -->
<main id="main">
    <div class="testmason">
        <article class="hentry">Post 1</article>
        <article class="hentry">Post 2</article>
        <article class="hentry">Post 3</article>
        .....
        .....
        <article class="hentry">Post n</article>
     </div>
</main>

<!-- Footer Widgets -->
<div id="footer-widgets" class="footer-widgets">
    <aside class="widget">Widget 1</aside>
    <aside class="widget">Widget 2</aside>
    <aside class="widget">Widget 3</aside>
    .....
    .....
    <aside class="widget">Widget n</aside>
</div>

Ниже приводится URL, где я пытаюсь реализовать этот макет. - http://lanarratrice-al-rawiya.com/lanarratrice/blog/

Я не хочу, чтобы кладка загружалась на мобильные устройства.
1. Я хочу, чтобы масонство на постах работало только тогда, когда минимальная ширина документа составляет 837 пикселей.
2. Также я хочу, чтобы кладка в нижнем колонтитуле работала только тогда, когда минимальная ширина документа составляет 880 пикселей.

Любой медиа-запрос ниже указанной ширины не будет запускать макет каменной кладки, и я буду отображать все свои сообщения и виджеты во всю ширину (занимая все доступное пространство). Чтобы реализовать это, я использую запрос js, который запустит макет кладки, если он соответствует медиа-запросу. Ниже приводится мой JavaScript:

JAVASCRIPT

// Masonry settings to organize footer widgets and blog posts
jQuery(document).ready(function($){
    var $container = $('#footer-widgets'),
        $maincontent = $('.blog .testmason');

    enquire.register("screen and (min-width:837px)", {

        // Triggered when a media query matches.
        match : function() {
            $maincontent.masonry({
                columnWidth: 200,
                itemSelector: '.hentry',
                isFitWidth: true,
                isAnimated: true
            });
        },

        // Triggered when the media query transitions
        // from a matched state to an unmatched state.
        unmatch : function() {
            $maincontent.masonry('destroy');
        }

    });

    enquire.register("screen and (min-width:880px)", {

    // Triggered when a media query matches.
    match : function() {
        $container.masonry({
            columnWidth: 400,
            itemSelector: '.widget',
            isFitWidth: true,
            isAnimated: true
        });
    },

    // Triggered when the media query transitions
    // from a matched state to an unmatched state.
    unmatch : function() {
      $container.masonry('destroy');
    }

    });
});

И, наконец, это мой CSS, который применяется на этой странице:

CSS

#main {
    max-width: 100%;
    width: 100%;
}

.testmason {
    margin: 0 auto 35px;
}

#main article {
    margin: 0 20px 35px;
    width: 360px;
    float: left;
}

@media screen and (max-width: 854px) {
    #main { width: 100%; }

    #main .testmason {
        margin: 0 10px;
        width: auto!important;
        height: auto!important;
    }

    #main article {
        float: none;
        width: 100%;
        margin: 0 0 35px;
    }

    #main .index-box {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
        margin: 0 auto 2em;
        width: auto;
        max-width: 780px;
        max-width: 78rem;
    }

    #main .navigation {
        width: auto;
        max-width: 780px;
        max-width: 78rem;
    }
}

.index-box {
    margin: 0;
}

nav.paging-navigation {
    width: 90%;
    position: static!important;
    margin: 0 auto;
}

Кажется, что мой JavaScript работает правильно, потому что макет кладки реализован. Но по мере того, как я изменяю размер окна браузера Firefox до 846 пикселей (примерно такого размера), я вижу разбитый макет. Иногда я вижу, что пост находится в верхней части нижнего колонтитула. Пожалуйста, смотрите следующую картинку прилагается.

Чтобы воспроизвести эту ошибку, вам, возможно, придется уменьшить и расширить окно браузера (firefox) примерно в 5-8 раз. Иногда, если вы сжимаете его очень быстро или очень медленно, вы можете не увидеть сломанный макет. Кстати, я использую Firefox 35.0.1. Пожалуйста, дайте мне знать, что я могу сделать, чтобы решить эту проблему. Благодарю.

Answer 1

Добавить $container.masonry() функция загрузки страницы тоже.

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