The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Best Media Query excluding scroll solution

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #200533

    Media Queries include the scrollbar, so if you use something like this:

    @media (max-width: 768px) {
    background-color: green;

    … it will actually fire(depending on the scrollbar width of the browser) at about 750px. IMO this sucks and I’m currently unsure, how to solve this problem.

    Solution #1

    html {
        overflow: hidden;
        height: 100%;
    body {
        height: 100%;
        overflow-y: scroll;
        position: relative;

    Seems to work, but looks hacky to me

    Solution #2
    use a JavaScript solution like
    Problem: I fear this hurts the performance

    Solution #3
    Do nothing. Big Frameworks like Foundation or Bootstrap seem to do this (nothing) and I wonder why.

    What’s your opinion? How do you face this problem?



    Viewport units and media queries are a bit flawed for practical use (with pixel accuracy). Since I’m using jQuery often, $(window).width() is a very reliable tool for this. A possible performance issue (I doubt there is though) can be limited by not changing the CSS with JavaScript but adding and removing predefined classes.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.