CSS: max-width for @media query not working

(It works on other browsers but not chrome)

I want to apply a style only when the browser size is less than 1400px

with max-width not working

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

with min-width its working

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)

Fiddle for this

https://jsfiddle.net/j4Laddtk/

Solution 1:

Have you tried adding the viewport in?

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

Working JSFiddle

Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.

Solution 2:

Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)

Solution 3:

Try this method.

This will target based on device

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

To target based on browser window area

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

Solution 4:

You need to place the @media queries after you declare your standard