Why Is My CSS Media Query Being Ignored or Overridden

Why is my CSS media query being ignored or overridden?

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

Why is my CSS media query being ignored?

Aren't your media query styles being overridden by the later values rather than ignored? Have you tried moving the general styles before the MQ ones (I suppose you could also use !important, but that's generally a bad idea), or adding in another obvious style, like background: red; in the MQ one?

Media Query Styles Not Overriding Original Styles

The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.

The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.

To have the first media query selector take precedence, prepend an ancestor element to it:

@media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}

CSS media query not overriding original styling

You have a semicolon here

@media only screen and (max-width: 959px;){

Remove it and it will behave as expected. I don't know Notepad++'s settings, but I recommend getting an editor that highlights minor issues like this. Or just use something like jsfiddle.

There are also numerous issues throughout your HTML and CSS, like unclosed tags, using b instead of strong, your CSS for *'s padding is using a semicolon instead of a colon.

Why is my CSS media query ignored by mobile phones?

You need to set your viewport meta tag to content="width=device-width, initial-scale=1". This tells the browser to render the width of the page at the width of the device's screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default).

HTML

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

The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width value which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.

You can read more about the viewport meta tag and how it works here.

Why is my CSS Media Query being ignored or overridden? (tumblr)

It's simply caused by a syntax error in the .capz class, juste before your media query :

.capz {
opacity:0;
filter:alpha(opacity = 0);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: absolute;
background: rgba(255,255,255; //missing closing parenthesis
width: 100%;
height: 100%;
bottom:3px;
}

@media screen and (max-width: 640px){
.double{width:260px;!important}
.double img{width:100%!important;height:auto !important;}
img {max-width: 100% !important;height: auto !important;}
}

(Note : you don't need !important tag anymore in this case)

Updated fiddle

Override CSS using Media queries struggle

The problem comes down with the order of your including CSS files mobile.css. Here's the order. The first file is style.css, then mobiel.css included/imported via style.css as below.

@import "style/css/mobile.css";

The CSS is not mobile-first. Instead, targets device width using max-width and min-width.

Sample ImageSample Image

Since mobile.css loaded before the rest of of style.css properties, its properties are being overridden by style.css regardless of width (I believe this is caused by media="screen" attribute)

You could make your CSS mobile-first, meaning that all properties are optimized for mobile, then as the screen gets wider, you apply tablets, and desktop optimized CSS for elements. It's laborious. Best solution is to load mobile.css after style.css like below

<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style.css" type="text/css"> <!-- remove media attribute or set it to "all" -->
<link rel="stylesheet" href="http://alyazmalim.co.uk/wp-content/themes/alyazmalim/style/css/mobile.css" type="text/css">

Media query not working without !important

Explanation

How the browser see your CSS without !important:

for screen 200px < x < 800px do this {
bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
bla bla bla
}

When you add !important the browser will take it like this:

for screen 200px < x < 800px do this {
bla bla bla
!do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
bla bla bla
}

If you place @media block in the end of your file and remove all the !importants it will look like this:

for all screens do this {
bla bla bla
}
but for screens 200px < x < 800px do this {
bla bla bla
}

Demo

Open this snippet in full page mode and try to change browser's window size

@media (max-width: 800px) {    .bad {        background-color: green;    }}
.bad, .good { width: 100px; height: 100px; background-color: firebrick;}
@media (max-width: 800px) { .good { background-color: green; }}
<div class="good"></div><div class="bad"></div>


Related Topics



Leave a reply



Submit