How to debug unwanted responsive breakpoints?

Question

I'm currently using Bootstrap 4 alpha 4.

I've bought a website which I've started to study and modify. I'm having a particularly weird problem that I assume must be related to media queries somehow. The original developers refused to fix the issue.

When I visit the website and resize the viewport width to anywhere between 992px and 1008px (both inc.) parts of website disappear because this responsive breakpoint is not defined within the established Bootstrap classes. I've tested this with the latest Chrome and FF browsers.

Does anybody have a clue how I could debug this thing?

I've tried searching for values 992 and 1008 as well as +/- 1 in the CSS files but the 1008 value is not found anywhere (in the whole project!) and the 992 value is being used normally within the stylesheet AFAIK.

You can see this issue live here. When you resize the browser width between 992px and 1008px the logo will disappear.

Answer 1

The problem is the scrollbar.

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

In fact, if you add the overflow: hidden property to the HTML tag, everything will work correctly.

Your media query and javascript not calculate the same width (one with and the other without scrollbar).

Here a JSFiddle example of the problem.

Debugging the site, the JS(minified) and function(a part of it) is:

/prestashop/PRS01/PRS0100014/themes/cenzo/assets/js/theme.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()
})

When the viewport is 1007 in u.default.responsive.current_width you can see 991

u.default.responsive.min_width is 992

The condition u.default.responsive.current_width < u.default.responsive.min_width is true and the remove node function is fired.

For debug this, on chrome "Elements" tab find the element ID top-menu and set the break on... node removal, checking the stack you can find the function above and all values. "Window Resizer" plugin for chrome help you to check the Viewport and Window size together.

---

The solution in your case is a little complex because a CMS and/or Framework are complex. You can replacing (window).width() with window.innerWidth probably you solve it, but I can not know what will happen to the rest of the theme.

But you can find some solutions here on stackoverflow:

CSS Media Queries and Firefox's Scrollbar Width

or here

$(window).width() not the same as media query

Hope this help you :)

Answer 2

It looks like the container in which the logo is situated has a max-width to an amount SMALLER than the minimum width required for it to be active.

try changing this (theme.css, line 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;        
    }
}

to this:

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

Then the logo is always visible.