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.

Answer 2

Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)

Answer 3

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

}

Answer 4

You need to place the @media queries after you declare your standard

Answer 5

Another thing that can happen is that you do something really stupid like:

@media only screen and (max-width: 1400)  { ... }

Make sure you put the px to identify what the quantity of your max-width is.

@media only screen and (max-width: 1400px)  { ... }

Not that I've ever been stuck for an hour on something so simple..

Answer 6

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

Answer 7

This worked for me

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

Answer 8

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.

Answer 9

Please Add the Following line, this works for me

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

Answer 10

Set these in your head tag

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

Answer 11

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

Answer 12

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.