CSS: max-width for @media query not working

Question

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

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