Last Updated: September 30, 2021
·
1.012K
· robsonsobral

When using min-device-width, remember to set HTML min-width

If you chose to set your media-queries using min-device-width, instead of min-width, remember to set minimum width to the viewport intended to avoid to break the layout on non maximized windows.

Let's say you use this media-query:

@media only screen and (min-device-width : 60em) {/* 960px */
    [...]
}

If the user resizes the browser window, the HTML element will shrink accordingly and the scrollbars will review part of the layout without background or maybe completely empty.

So, set the minimum width of the viewport to matches the width on the media query.

@media only screen and (min-device-width : 60em) {/* 960px */
    html {
        min-width: 60em;
    }
        [...]
}