Search code examples
htmlcssgoogle-chromemedia-queriesdynamic-resizing

@media Query Working in IE, Firefox, and Edge, but not Chrome

I have created a media query to shrink a div's (#example in this case) padding if the screen width goes below a certain point. See the example below.

@media screen and (max-width: 733px) {
#example {
    padding-left: 90px;
    }
}

This query works perfectly in IE 11, Firefox Quantum, and Edge. However, when I test it in Chrome, I get the same result as if the query wasn't even there.

After doing some research, I have added slight variations of a viewport entry in my HTML header, and at the moment my entry in <head></head> is:

<meta name="viewport" content="width=device-width" />

(I have also used "width=device-width, initial-scale=1" with no better result)

Lastly, I have also tried using @media only screen instead of @media screen, and this has not worked either.

For some final details my html file is a cshtml file if it makes a difference (this is for a webapp), and I am testing through the VS2017 Community debugger.

Thank you!

Solution

  • Try adding this to your CSS:

    @media screen and (max-width:733px),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx)
   {
        #example
        {
            padding-left: 90px;
        }
   }

    and this to the <head> section of the HTML document:

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

    This code is tested and works. If it doesn't work for you, you might have problems somewhere else in your code, possibly your CSS. In that case please post a link to your site or add some more code, preferably your CSS.