Geek Answers Handbook

Why is my CSS multimedia request ignored or overridden?

It drives me crazy! I looked through a few questions in Stackoverflow and see that the ID element takes precedence over the class element (which is good to know, but I have the feeling that this is not my problem). This is my NAVIGATION menu that I am 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 that Viewport UNDER is 1140px, I want CSS to change the menu as follows:

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

Thus, the main menu will float to the left with a smaller upper indent.

When Viewport UNDER is 800px, I want CSS to change the menu as follows:

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

As you can see, I just changed NAV Float to NONE

Now, when I test it, GENERAL CSS works fine, and also when the view port is under 1140px, but as soon as I go under 800px, NAV still floats to the left !! ?? Does it seem to inherit a 1140px CSS content request? Any ideas?

UPDATE: This is how I define 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" />
+7
source share
3 answers

Maybe something is wrong 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 { } }
+10
source

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

http://jsfiddle.net/RJm3c/1/embedded/result/ <- change the size of 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} }

+1
source

I had a similar problem, I put all my @media requests in a separate style sheet called responsive, and it works fine until I start importing new responsive CSS and elements into my existing website.

I had to start adding! important for every CSS line contained in the @media request. Then I change the loading order of my CSS files and move one of them, called “responsive” through the list, which should be last loaded, and then everything starts working fine, and I no longer needed to use the important operator after the CSS lines.

0
source

More articles:


All Articles