Как отлаживать нежелательные отзывчивые точки останова?

в настоящее время я использую Bootstrap 4 alpha 4.

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

когда я посещаю веб-сайт и изменяю ширину окна просмотра в любом месте между 992px и 1008px (оба inc.) части веб-сайта исчезают, потому что эта отзывчивая точка останова не определена в пределах установленного Классы начальной загрузки. Я протестировал это с помощью последних браузеров Chrome и FF.

кто-нибудь знает, как я мог бы отладить эту вещь?

Я пробовал искать значения 992 и 1008 а также +/- 1 в файлах CSS, но 1008 значение нигде не найдено (во всем проекте!) и 992 значение используется обычно в таблице стилей AFAIK.

вы можете увидеть этот вопрос видео здесь. При изменении размера браузера ширина между 992px и 1008px логотип исчезнет.

10
bootstrap-4

2 ответов

проблема заключается в полосе прокрутки.

1008px-992px=16px //the scrollbar dimension

на самом деле, если вы добавите overflow: hidden свойства HTML - тег, все будет правильно работать.

ваш медиа-запрос и javascript не рассчитывают одинаковую ширину (один с и другой без полосы прокрутки).

вот пример JSFiddle проблемы.

отладка сайта, JS (minified) и функция(часть ее):

/ prestashop/PRS01/PRS0100014/темы/cenzo/активы/js / тема.js

//.........FOLLOW THIS LINE............................................................................_____HERE______
u.default.responsive = u.default.responsive || {}, u.default.responsive.current_width = (0, s.default)(window).width(), u.default.responsive.min_width = 992, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, (0, s.default)(window).on("resize", function() {
    var e = u.default.responsive.current_width,
        t = u.default.responsive.min_width,
        n = (0, s.default)(window).width(),
        i = e >= t && n < t || e < t && n >= t;
    u.default.responsive.current_width = n, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, i && o()
}), (0, s.default)(document).ready(function() {
    u.default.responsive.mobile && o()
})

когда видовое окно 1007 в u.default.responsive.current_width вы можете увидеть 991

u.default.responsive.min_width составляет 992

условие u.default.responsive.current_width < u.default.responsive.min_width true и

3

похоже, что контейнер, в котором находится логотип имеет max-width в размере меньше чем минимальная ширина, необходимая для его активности.

попробуйте изменить это (тема.css, строка 703-719):

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 940px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1024px;      
        padding-left:0;
        padding-right:0;        
    }
}

для этого:

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;      
        padding-left:0;
        padding-right:0;        
    }
}

тогда логотип всегда виден.

2