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.
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%;
   }

}

```