Responsive media query not working in Google Chrome

Question

I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.

I use the following code to achieve this:

#bg{
    background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
    margin-left:auto;
    margin-right:auto;
    margin-bottom:1.6rem;
    border-width:0 0.1rem 0.1rem 0.1rem;
    border-style:solid;
    border-color:#303030 #101010 #000;
    border-radius:0.8rem;
    min-width:94.2rem
}

@media (min-width: 70rem){
    #bg{
        border-radius:4px;
        border-radius:0.4rem;
        width:90%
    }

}

@media (min-width: 91rem){
    #bg{
        width:80%
    }

}

@media (min-width: 112rem){
    #bg{
        width:70%
    }

}

This works just fine in Firefox 30, however Google Chrome always displays the element at 70% width.

Previously, I had also used max-width in the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.

The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?

The affected website can be found at this link.

Could you please show an excerpt of the DOM structure? Have you looked at the compiled CSS if it's valid? — try-catch-finally, Jun 21 '14 at 20:14
@try-catch-finally I'm not sure how to make a standalone example of the site structure, as it's a bit more complex, but I've added a link to the website in question. Also, the code you see is the compiled CSS. — ividyon, Jun 22 '14 at 10:58

score 111 · Accepted Answer · answered Jan 18 '17 at 16:36

111

add this line in <head>

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

answered Jan 18 '17 at 16:36

Hassan Raza

1,454
2
13
17

4

This doesn't have any effect on desktop browsers. – JJJ Jan 18 '17 at 17:03
1

can you send me please link of your website – Hassan Raza Jan 19 '17 at 12:57
1

The question was posted 3 years ago. I'm pretty sure that by now they have either fixed the issue or abandoned the project. And there *is* a link to the website in the question. – JJJ Jan 20 '17 at 07:37
2

Yes, "viewport" meta tag! Just spent an hour troubleshooting perfect media queries when for some reason my template was missing the "viewport" tag. – ruslaniv Oct 13 '19 at 15:31
1

Thanks! I didn't know why my media queries were not working on chrome. It was lacking viewport meta tag. – Gabriel Linassi Apr 16 '20 at 01:49
6

Can you explain why this fixes the problem? This answer would be much more useful if we could know why this works. – aelmosalamy Jul 22 '20 at 06:52

score 12 · Answer 2 · answered Apr 30 '20 at 19:09

12

If you're using Chrome (or any browser) on a desktop, the browser zoom should be 100%. No more or no less. Otherwise, responsive doesn't work (use Ctrl + scroll in Windows, or Cmd +/- in Mac to adjust).

answered Apr 30 '20 at 19:09

PlainOldProgrammer

2,725
5
22
30

1

This is not true, the zoom option is only for the browser window and not for the website content. – Dexter Jun 30 '20 at 06:49
1

@Dexter I never say that zoom option is for website content. – PlainOldProgrammer Jul 25 '20 at 22:46
Helped in my case. When zoom is not 100%, then this percentage is applied to media queries. For example @media (min-width: 768px) with zoom level 90% is applied only at 691 pixels (768*0.90). – user207825 Feb 21 '21 at 18:49
Yes，save me a lot of time!! – ctaoist Dec 07 '21 at 01:47
The viewport declaration must come before you define the CSS media query. I had mine below it in the header and it didn't help. – Gene Vincent Jan 24 '22 at 14:23

score 6 · Answer 3 · answered Jan 30 '19 at 12:02

6

You can tweak this to your needs

// css for mobile here
// ...

/* desktop */
@media (min-width: 900px) and (orientation: landscape)
{
    // css for desktop here
    // ...
}

And don't forget

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

answered Jan 30 '19 at 12:02

Baked Inhalf

3,375
1
31
45

to me it was – Nour abo elsoud Aug 12 '19 at 09:43

score 3 · Answer 4 · answered Sep 21 '21 at 06:01

3

I had an issue with chrome that it was loading css once we cross the pixel which suppose to be effected, added decimal value's fixed my issue like.

@media (max-width: 767.98px){...}

Same followed in bootstrap 4 css as well.

answered Sep 21 '21 at 06:01

Mohammed Yousuff

122
1
1
9

score 2 · Answer 5 · answered Apr 03 '17 at 06:59

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background:green;
        }
        @media only screen and (max-width: 500px) {
            body{
                background:yellow;
            }
        }
    </style>
</head>
<body>

</body>
</html>

score 1 · Answer 6 · answered Jun 21 '14 at 23:43

1

See if this more usual syntax works better:

@media screen and (min-width: 112rem){ ... }

answered Jun 21 '14 at 23:43

ralph.m

13,468
3
23
30

Thanks for the more proper syntax, however this does not solve the issue on Chrome. – ividyon Jun 22 '14 at 10:56
Just noticed you've added a link. Those media queries are working fine in Chrome (Mac) for me. – ralph.m Jun 22 '14 at 22:42

score 1 · Answer 7 · answered Oct 26 '20 at 21:02

1

Try this, it's similar to Hassan's response, just add minimum-scale=1

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

answered Oct 26 '20 at 21:02

Daisy

49
6

Karthick Nagarajan · Answer 8 · 2016-11-30T16:20:44.927

All are correct, but Chech this

@media only screen and (min-width : 320px) {...}

NOT

@media screen and (min-width: 320px){ ... }

/*==========  Mobile First Method  ==========*/

        /* Custom, iPhone Retina */ 
        @media only screen and (min-width : 320px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (min-width : 992px) {

        }

        /* Large Devices, Wide Screens */
        @media only screen and (min-width : 1200px) {

        }



        /*==========  Non-Mobile First Method  ==========*/

        /* Large Devices, Wide Screens */
        @media only screen and (max-width : 1200px) {

        }

        /* Medium Devices, Desktops */
        @media only screen and (max-width : 992px) {

        }

        /* Small Devices, Tablets */
        @media only screen and (max-width : 768px) {

        }

        /* Extra Small Devices, Phones */ 
        @media only screen and (max-width : 480px) {

        }

        /* Custom, iPhone Retina */ 
        @media only screen and (max-width : 320px) {

        }

score 0 · Answer 9 · answered Sep 18 '18 at 19:00

0

please close your code with ';' and try this

@media (min-width: 70rem){
#bg{
    border-radius:4px !important;
    border-radius:0.4rem !important;
    width:90% !important;
}

answered Sep 18 '18 at 19:00

Md Adilur Rashid

700
7
13

score 0 · Answer 10 · answered Jun 11 '21 at 07:05

0

As others argue above, on a desktop you need to check that the zoom is set to 100% as well as use the viewport meta tag

answered Jun 11 '21 at 07:05

Alejandro Pacheco

11
2

score 0 · Answer 11 · answered Jan 30 '22 at 05:34

0

My problem was that I was trying to use a media query of a style @media (width > x) as opposed to @media (min-width: x). Firefox handled the media query properly, but Chrome ignored it.

answered Jan 30 '22 at 05:34

aardvarkk

14,955
7
67
96

score 0 · Answer 12 · answered Jul 01 '22 at 10:24

0

Also to point out.

if you write a media query like this `

@media screen and(max-width:500px){
    body {
        color:green;   
    }
}

`

If it does not work, the problem is with not spacing the word and and the bracket like so and (

answered Jul 01 '22 at 10:24

George

321
3
5

Responsive media query not working in Google Chrome

12 Answers12

Linked