Responsive media query not working in Google Chrome

Asked 21/6, 2014 at 19:20 Answered 1/7, 2022 at 10:24

Solved css google-chrome firefox width media-queries

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.

Posse answered 21/6, 2014 at 19:20 Comment(2)

Could you please show an excerpt of the DOM structure? Have you looked at the compiled CSS if it's valid? – Straub 21/6, 2014 at 20:14

@Straub 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. – Posse 22/6, 2014 at 10:58

117

add this line in <head>

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

Bolden answered 18/1, 2017 at 16:36 Comment(6)

This doesn't have any effect on desktop browsers. – Helgahelge 18/1, 2017 at 17:3

can you send me please link of your website – Bolden 19/1, 2017 at 12:57

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. – Helgahelge 20/1, 2017 at 7:37

Yes, "viewport" meta tag! Just spent an hour troubleshooting perfect media queries when for some reason my template was missing the "viewport" tag. – Interracial 13/10, 2019 at 15:31

Thanks! I didn't know why my media queries were not working on chrome. It was lacking viewport meta tag. – Catabasis 16/4, 2020 at 1:49

Can you explain why this fixes the problem? This answer would be much more useful if we could know why this works. – Brazenfaced 22/7, 2020 at 6:52

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).

Water answered 30/4, 2020 at 19:9 Comment(5)

This is not true, the zoom option is only for the browser window and not for the website content. – Imaginative 30/6, 2020 at 6:49

@Imaginative I never say that zoom option is for website content. – Water 25/7, 2020 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). – Intwine 21/2, 2021 at 18:49

Yes，save me a lot of time!! – Meshach 7/12, 2021 at 1: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. – Han 24/1, 2022 at 14:23

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">

Imaret answered 30/1, 2019 at 12:2 Comment(1)

to me it was <meta name="viewport" content="width=device-width, initial-scale=1"> – Jeromyjerreed 12/8, 2019 at 9:43

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.

Goldthread answered 21/9, 2021 at 6:1 Comment(0)

<!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>

Lizettelizotte answered 3/4, 2017 at 6:59 Comment(0)

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" />

Differentiation answered 26/10, 2020 at 21:2 Comment(0)

See if this more usual syntax works better:

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

Aldis answered 21/6, 2014 at 23:43 Comment(2)

Thanks for the more proper syntax, however this does not solve the issue on Chrome. – Posse 22/6, 2014 at 10:56

Just noticed you've added a link. Those media queries are working fine in Chrome (Mac) for me. – Aldis 22/6, 2014 at 22:42

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) {

        }

Bugbear answered 30/11, 2016 at 15:32 Comment(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;
}

Ransome answered 18/9, 2018 at 19:0 Comment(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

Crine answered 11/6, 2021 at 7:5 Comment(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.

Hellenhellene answered 30/1, 2022 at 5:34 Comment(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 (

Sanctity answered 1/7, 2022 at 10:24 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags