Media Query Works on Mobile Firefox But Doesn't Work on Mobile Chrome

Media query works on mobile Firefox but doesn't work on mobile Chrome

Add this meta tag into the header of your HTML file:

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

This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.

Media queries not working in Chrome but in Firefox?

You've got some bad nesting going on, or incorrect braces. If I remove the actual styles, it looks like this:

@media screen and (max-width:1200px) { 

}

@media screen and (max-width:800px) {

/* Missing } brace here */

@media screen and (max-width: 480px) {

}

Firefox is probably just handling the error differently. Take care of that and you should be good to go.

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

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.

@media queries not working in Chrome or Safari iOS

So what I found actually was that I am dealing with a browsers catching function. Rather than a problem with my @media queries. The strange thing is that Firefox loads the new web content immediately. While chrome and safari, I have to manually clear the cache and cookies every time in order to see the changes I made on the web server.

Edit - a fix posted by Jason bamber

You can easily bust the browser cache when you make changes, by appending a query string to the css <link rel="stylesheet" href="help.css?v=10" type="text/css"/> change the number when you make a change –

Media Query Works on Mobile Firefox But Doesn't Work on Mobile Chrome