CODEWITHSUNDEEP
cssmedia-queries
George Phillipson
George Phillipson

Reputation: 860

Css Media Queries layout breaks on wrong width

I'm stuck on this problem, I'm working with a media query

@media screen and (min-width: 527px) and (max-width: 599px) {
    body {background-color:green}
}

@media only screen and (max-width: 526px) {
    body {background-color:red}
        }

If I understand it correctly anything below 526px will display the colour red I also have this jquery which displays the browser width:

 <script>
        $(window).resize(function () {

            $(window).height();
            $(window).width(); 
            $(".width-value2").text($(window).width());
        });
    </script>

And in the head of page: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

But when the width hits 510px according to jquery it changes to green,17px before its supposed to.

Is the jquery displaying the wrong width, if so how do I display the correct width.

Any help would be appreciated.

Upvotes: 0

Views: 768

Answers (1)

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

This is because of scrollbar (17 px).

Note, that in chrome browser one scrollbar width, in firefox another, in ie another etc...

Use mqGenie tool fix this. Also, it eliminates scrollbar difference in different browsers (read note). Demo

Or, if you don't want mqGenie find something same. Now you know what was the reason of the problem.

Upvotes: 2

Related Questions