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: 
This worked for me

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

```
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.