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: 
Have you tried adding the viewport in?

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

```

[Working JSFiddle](https://jsfiddle.net/j4Laddtk/1/)

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.
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.

If you have

```
.container {
  color: white;
}

```

and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.

```
.container {
  color: white;
}

@media only screen and (max-width: 600px) {
  .container {
    color: pink;
  }
}

```

So if your media queries are at the top the default colour of white will override the media query for pink.