Media queries getting applied at wrong width

Question

I have a very simple media query.

@media only screen and (max-width: 1200px) {
    .tool-panel {
        margin: 0px 24px 0px 0px;
    }
}

which gets applied at 1183.20px instead of 1200px. This is occurring in every browser and all browsers have their zoom levels set to 100%.

Also, this non-integer width looks weird as I have always dealt with integral values before while debugging on a browser.

However, when I check the value of window.innerWidth in the console, it comes out to be 1200 when the browser shows the width to be 1183.20px.

can you try zooming out to 90% and then back to 100%? I had this issue once and that fixed it. — nullptr, Sep 21 '21 at 04:45
Tried that but I'm having the same results. I tried it with different browsers too. — FunnelScr, Sep 21 '21 at 04:49
How do you check that is width 1183.20px can you provide screenshot — Aman, Sep 21 '21 at 05:22
is your code on a local or live server? if live then provide a link — Aman, Sep 21 '21 at 05:30
Is there a vertical scrollbar? c.f. https://stackoverflow.com/questions/8339377/how-to-get-screen-width-without-minus-scrollbar/8340177 — schmauch, Sep 21 '21 at 06:20
It certainly must be the scrollbar. However, I'm stumped at the float value of width. How do we get that? — Servesh Chaturvedi, Sep 21 '21 at 06:31
@schmauch Yes, that's what I wrote in a comment on the answer below. — FunnelScr, Sep 21 '21 at 06:34

Tuan Dao · Answer 1 · 2021-09-21T06:08:47.297

0

which gets applied at 1183.20px instead of 1200px. This is occurring in every browser and all browsers have their zoom levels set to 100%.

max-width: 1200px is apply for range 0 to 1200px. So if you want the inside css is just apply for 1200px and not apply for 1183.20px, you should use min-width: 1200px

//                      ↓↓↓
@media only screen and (min-width: 1200px) {
    .tool-panel {
        margin: 0px 24px 0px 0px;
    }
}

Try to check the below meta tag in your HTML, if it doesn't exists, add it in and try again.

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

However, when I check the value of window.innerWidth in the console, it comes out to be 1200 when the browser shows the width to be 1183.20px.

The answer here https://stackoverflow.com/a/36317697/5436211

edited Sep 21 '21 at 06:08

answered Sep 21 '21 at 05:34

Tuan Dao

2,647
1
10
20

1

Won't `min-width: 1200px` just correspond to the range `1200px to infinity`? Also, with `min-width`, I am experiencing the same behavior, that is the query takes effect at widths `1183.20px` and greater. – FunnelScr Sep 21 '21 at 05:39
@KobayakiTunnel `max-width: 1200px` is still apply for `1183.20px` `1000px` `900px` `600px` until have another break point like `max-width: 992px`. That's right, nothing is wrong here. – Tuan Dao Sep 21 '21 at 05:43
@KobayakiTunnel updated more detail in the answer. – Tuan Dao Sep 21 '21 at 06:10
I am using that `meta` tag already. Also, I have found the solution to my issue which had to do with the width of the scrollbar. Anyways, thanks for your input and time. – FunnelScr Sep 21 '21 at 06:16

Media queries getting applied at wrong width

1 Answers1