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
.
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 !important
s 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
How to Display and Hide a Div with CSS
Align Text to The Bottom of a Div
CSS Negative Margins for Positioning
What Is the Recommended Way to Dynamically Set Background Image in Angular 4
Best Replacement for Font Tag in HTML
Why Box-Sizing Is Not Working with Width/Height Attribute on Canvas Element
CSS Inverted Trapezium When Width Will Differ
Why Is It Impossible to Change Content in CSS
Media Queries and Device Pixel Ratio
Set Div Height Equal to Screen Size
Using Background-Attachment:Fixed in Safari on The Ipad
Is There a Shortcut for Setting !Important on Every Property in a CSS File
CSS Media Query to Handle New High Resolution Mobiles Whilst Ignoring Tablets
CSS Background Images Not Loading
What Is The Rationale Behind Margin-Top: Auto and Margin-Bottom: Auto Amounting to 0 Margin