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/

Amphi

Could be you have the queries in the wrong order...but without a demo it;s hard to help. – Deweese

This is the only media query right now – Amphi

can you provide a fiddle? – Gyniatrics

jsfiddle.net/j4Laddtk – Amphi

the developer tool was saying that the size of the viewport is 1400px but the actual width the css was considering was more than 1400px. Because of this the media query isn't working. – Amphi

@DivyaBarsode did u got any solution? me too facing the same issue. – Abundance

@Abundance I didn't find any solution. Just did trial and error and used those values – Amphi

@Logeshwaran, sure. sent invite – Amphi

Possible duplicate of Media Queries firing at wrong width – Invalid

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.

Burgrave

Without this tag, media queries just MATCH regardless of the condition. e.g. max-width: x px always returns true. – Vedavedalia

Answer 2

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

Invalid

I spent at least half an hour on this. You are a gentle(wo)man and a scholar! – Downcome

You saved my life. Checked all the technical answers. – Anaclitic

ctrl+0 , to reset browser – Gleda

Thank you! My head was hurting. Lol. – Swash

shortcut for most browsers: linux/win: ctrl + 0, mac: cmd + 0 – Magdalen

almost pulled my hair 😀 so many things to keep track of as a developer😭 – Alcohol

That's half of the problem I have with HTML and CSS – Sahib

Thank you so much dude!! – Calhoun

Man you just saved my life.. – Draw

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

}

Gymnasiarch

Not working. max-device-width will check the width of the device and not the window right? – Amphi

@DivyaBarsode, Yes, Try max-width if you want to target display browser. – Gymnasiarch

@DivyaBarsode, edited my answer, added max-width. Its works fine in my local machine. – Gymnasiarch

@DivyaBarsode, Can you try by adding !important to left property like left:-0.5% !important; . – Gymnasiarch

I just checked on opera browser.. It works fine there. But in chrome it isnt – Amphi

@DivyaBarsode, Might be cache issue. @media should work fine on both browsers. Try CTRL +F5 on your chrome and see the results, if still doesn't work then go through this link #30198432 – Gymnasiarch

Did that before only but didnt work. In dev tools Elements tab, It doesnt show the media query. But when i go to dev tools-> Source -> css it shows the media query written – Amphi

Answer 4

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

Cleavable

Thank you. This was my actual problem, and pretty sneaky if you you're not an experienced developer. – Merci

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

Bigeye

Ugh. This was my error. Thank you fine sir. – Lilybelle

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

Ethylethylate

Answer 7

This worked for me

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

Outsider

I've forgot a space after and . Edited – Outsider

max should be after min... Even though it's non-recommended trick. – Invalid

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.

Polyphone

Answer 9

Set these in your head tag

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

Vena

Answer 10

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

Geophagy

Answer 11

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.

Froissart