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 problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.

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

```

More details <https://www.w3schools.com/css/css_rwd_viewport.asp>
```
@media only screen and (max-width: 1000px) {
  /*Don't forget to add meta viewport in your html*/
}

```

If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.

Sometimes it's not working because of the browser cache.