Why is my CSS media query being ignored or overridden?

Question

This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). It's my NAVIGATION menu that I'm struggling with. (I use max-width btw)

Here is the GENERAL CSS for my NAV:

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

Now when the Viewport is UNDER 1140px, I want the CSS to change the menu like so:

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

So basically the menu will float left with less top padding.

When the Viewport is UNDER 800px, I want the CSS to change the menu like so:

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

As you can see I've I only changed the NAV Float to NONE

Now when I test it, the GENERAL CSS works fine as well as when the view port under 1140px, but as soon as I go under 800px, the NAV still floats to the left!!?? It seems to be inheriting the CSS media query of 1140px? Any ideas?

UPDATE: This is how I am defining my media queries

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />  

Greensboro

Try adding !important to your float:none rule; try to inspect the element's active styles and overrides in chrome developer tools or equivalent tools in your browser of choice. Also, you haven't described your actual media queries in question. – Moreira

I'm quite new at Responsive design and media queries. I'm not sure what you mean about "Described your actual media queries in question."? The above CSS is just snippets of CSS from my media queries css files. – Greensboro

can you create a jsfiddle of your question.?? that will be a lot helpful for us to answer you – Putto

The media queries are defined either in the <link> tags you load your css with, or in @include rules in the css files. You only hint that you use max-width, but the actual queries you use are missing in your question. Still, I believe it's more likely that other rules with higher specificity are overriding your float rule. – Moreira

Media queries are the parts of your css that describes the prereqisites for when to use different classes. Such as: "when width < 800px" and so on. They look like this: css3.info/preview/media-queries – Bes

@Moreira - I'm using <link> to define ... see my update in original post – Greensboro

@PerSalbark, thanks - I just wasn't too sure with the terminology there for a second. – Greensboro

I've done a website before using media queries which has worked 100% and the different between that website and the website I'm doing now is that I created my own CLASS within the NAV element. Using the Nav element, like Nav ul li {} and Nav a {} seems to be giving me these problems. – Greensboro

See also Responsive media query not working in Google Chrome – Tweet

Answer 1

Maybe there is something not right with your media queries? Try something like this:

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}

Bes

This same logic applies when you use the queries on <link/> tags. Your current links BOTH target widths less then 800. Make sure to add the min-width rule to the second link. – Bes

You see I'm pretty sure my media queries are correct as I've used them in another website before (see my comment above "I've done a website before ...") and it worked 100% ... though I'll fiddle around with your method for a bit. – Greensboro

Answer 2

I had a similar problem, I placed all my @media queries into a seperate stylesheet called 'responsive', and it wal all working fine until I started importing the new responsive CSS and elements into my existing website.

I had to start adding !important to just about every line of CSS contained within the @media query. I then change the loading order of my CSS files, and moved the one called 'responsive' down the list to be the last one loaded, and then everything started to work fine and I no longer needed to use the !important statement after the lines of CSS.

Crymotherapy

I've removed your signature from this post and another. Please review the help center, especially the section on self-promotion, as well as this page. Links to your own site go in your profile, not in your posts. – Wain

The downvotes on this post and the other are almost certainly due to spam flags cast against them; with the edits those will probably cease. If a moderator sees fit to dismiss the spam flags the downvotes will automatically be reverted. – Wain

This deserves a million upvotes. I struggled for weeks. My issue was that all the media queries worked when using them inline on the page - the issue was when I tried to clean up my code & put them into my main stylesheet... certain selectors worked, others didn't... even with !important tags.... no rhyme or reason. Then I put the media queries into their own sheet as per this post, and voila, problems solved! <3 ((big hug)) – Textualist

Answer 3

Here is the jsFiddle for your test cases.. http://jsfiddle.net/RJm3c/1/

http://jsfiddle.net/RJm3c/1/embedded/result/ <-- resize your browser to see the result

css:

  nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; text-transform:uppercase;}
  /*for test only*/
  body{ background-color: green}

  @media only screen and (max-width: 1140px), only screen and (max-device-width: 1140px) {
    nav ul li{ float:none;}
    nav a{ float:none; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: red}
  }

  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    nav ul li{ float:left;}
    nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: blue}
  }

​

Putto

Hmmmm... its works 100%! I've been fiddeling around for some time now and I have a feeling it's been my dreamweaver or my browser that's been giving me false result because all seems to be working now. I am going to look into it now and answer my own question to give the clarification – Greensboro

the css-properties are overridded in a file from top to bottom... so even if you change the order of @media position in the file u will get unexpected results!! try to target the wider screen first(in your case 1140px first then 800px). – Putto

Great - it's a learning curve (responsive design and Media Queries). Thanks for your effort though, you're a legend! – Greensboro

@SaurabhKumar Great guidance on properties being written from top to bottom. This solved a mysterious case of media queries ignoring specific values I had set. – Melaniemelanin