Menu
I have a website of which uses @media queries but it doesn't seem to set them. They always keep the default style.
For example:
#div1 { background:red}
@media screen and (max-height:912px) {
#div1{background:blue}
}
will always stick with background:red unless I use !important but within my media queries I am styling so many selectors. Do I need to set to every single selector style !important ?
977
Note: The examples on this page use CSS's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries. A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators.
Not necessarily, !important is used to override the default css i.e. to override attributes used in the default style. So, if there is a new attribute in the media queries, u do not have to use it along with that.
Media queries are used for the following: To conditionally apply styles with the CSS @media and @import at-rules. To target specific media for the <link>, <source>, and other HTML elements. To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.
Perhaps the most common media queries in the world are those that target particular viewport ranges and apply custom styles, which birthed the whole idea of responsive design. /* When the browser is at least 600px and above */ @media screen and (min-width: 600px) { .element { /* Apply some styles */ } }
I had the same problem. I realized that media queries have to be at the end of style sheets (even if you're using/importing multiple files on your workflow).
97
Looking at your example in //jsfiddle.net/TUL6h/55/: You need to change the order of the media queries. max-height:510px; includes max-height:500px; it has to come first in order for the more special case of 500px beeing displayed at all.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
