8

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" />
MSchumacher
  • 167
  • 1
  • 5
  • 13
  • 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. – lanzz May 30 '12 at 11:54
  • 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. – MSchumacher May 30 '12 at 12:01
  • can you create a jsfiddle of your question.?? that will be a lot helpful for us to answer you – Saurabh Kumar May 30 '12 at 12:08
  • The media queries are defined either in the `` 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. – lanzz May 30 '12 at 12:08
  • 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: http://www.css3.info/preview/media-queries/ – Per Salbark May 30 '12 at 12:10
  • @lanzz - I'm using to define ... see my update in original post – MSchumacher May 30 '12 at 12:11
  • @PerSalbark, thanks - I just wasn't too sure with the terminology there for a second. – MSchumacher May 30 '12 at 12:16
  • 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. – MSchumacher May 30 '12 at 12:20
  • See also [Responsive media query not working in Google Chrome](https://stackoverflow.com/questions/24345046/responsive-media-query-not-working-in-google-chrome) – ggorlen May 13 '23 at 22:20

3 Answers3

9

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 { }
}
Per Salbark
  • 3,597
  • 1
  • 23
  • 24
  • 2
    This same logic applies when you use the queries on tags. Your current links BOTH target widths less then 800. Make sure to add the min-width rule to the second link. – Per Salbark May 30 '12 at 12:20
  • 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. – MSchumacher May 30 '12 at 12:36
3

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.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Adrian Fowler
  • 51
  • 2
  • 3
    I've removed your signature from this post and another. Please review the [help/behavior], especially the section on self-promotion, as well as [this page](http://stackoverflow.com/help/promotion). Links to your own site go in your profile, not in your posts. – Martijn Pieters Mar 20 '15 at 19:09
  • 2
    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. – Martijn Pieters Mar 20 '15 at 19:11
  • 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)) – brandydoll Jul 01 '20 at 20:28
1

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

​

Saurabh Kumar
  • 5,576
  • 4
  • 21
  • 30
  • 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 – MSchumacher May 30 '12 at 13:12
  • 1
    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). – Saurabh Kumar May 30 '12 at 17:05
  • Great - it's a learning curve (responsive design and Media Queries). Thanks for your effort though, you're a legend! – MSchumacher May 30 '12 at 19:20
  • @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. – dimButTries Jun 14 '20 at 17:16