Does anyone know why the second media query (401 to 750) is not applying?
#mydiv {color:#FF0000;}
#media screen and (max-width:400px){
#mydiv {color:#33CC33;}
}
#media screen and (min-width:401px and max-width:750px){
#mydiv {color:#000;}
}
<div id="mydiv">
testing text color with media queries
</div>
http://jsfiddle.net/xpnGh/2/
The min-width and max-width descriptors need to be in their own set of parentheses, with the and outside them similarly to when you place it between screen and the first descriptor, like so:
#media screen and (min-width: 401px) and (max-width: 750px)
Related
How do i apply styles for differnt screen resolutions
For example: I have a computer with max screen resolution of 1366 X 768
and want to specify css styles only for this resolution .
Css #media rules only take into consideration min-width and max-width of the browser how do i target for specific resolution.
Use the resolution tag i.e. :
#media (resolution: 150dpi) {
p {
color: red;
}
}
More explantations and syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/resolution
Try this:
#media screen and (min-width: 1366px) and (max-width: 1366px)
and (min-height: 768px) and (max-height: 768px) {
/* style */
}
Use width and height mediaqueries
#media (width: 1366px) and (height: 768px) {
:root { background: yellowgreen; }
}
to match a viewport of 1366x768 px
Codepen example
Anyway it's worth noting that, unless you are in fullscreen mode, that rule won't be applied because the UI of your browser takes some room, so the actual viewport can't be exactly the same of the chosen resolution.
You can try this
#media screen and (min-width: 1500px) and (max-width: 1600px){
/*Your style */
}
I have 4 media queries in this order in my CSS:
#media screen and (max-width: 599px)
#media screen and (min-width:600px) and (max-width: 895px)
#media screen and (min-width: 896px) and (max-width: 1019px)
#media screen and (min-width: 1020px)
They work mostly, except for when I try to change flex-direction. I have this class above the media queries:
.home-mod4-founders {
display:flex;
align-items:stretch;
}
And this under the smallest media query:
#media screen and (max-width: 599px) {
.home-mod4-founders {
flex-direction:column;
}
}
For some reason, when the screen is under 599px, it takes on the value of one of the other 3 queries:
.home-mod4-founders {
flex-direction:row;
}
When I checked the page with Chrome's dev tools, it seemed to strip out the media query part of the largest one so that it overrides the 599px media query:
screenshot
The live site is here: www.whisperlodge.nyc
And I copy-pasted the CSS and HTML into a codepen http://codepen.io/chillinkwa/pen/MJZVEj
I managed to solve the issue by deleting the class from that largest media query. As the same specifications exist in the one below that, they somehow still seem to apply at a large browser width.
I have a media query for a website which depends on the width of the viewing window:
#media (max-width: 600px) {
...
}
This works perfectly.
I found that there was an issue with the site menu being cut off on certain devices because the height of the viewing window was not taken into account in the above statement, so I adjusted the statement accordingly (the menu is usually vertical but with the small screen or small height the menu should be changed to being horizontal) :
#media (max-width: 600px), (max-height: 400px){
...
}
However this does not work, the max-width value works but if I resize my window (Firefox and Chrome) to a letterbox size (<400px) then it doesn't run the corresponding height rules contained in the media query.
I have also played with variations such as :
#media all and (max-width: 600px), all and (max-height: 400px){
...
}
But with no success.
I have read various articles about CSS height but I can't see why my rules above are not applying? Any answers?
Tried
#media (max-width: 600px) and (max-height: 400px) {
body {
background:#000;
}
}
and worked fine!
UPDATE: the OR worked too http://jsfiddle.net/noj3u3xn/
#media (max-width: 600px), (max-height: 300px) {
body {
background:#000;
}
}
Maybe you can share more of your css?
The issue appears to be solved when applying the opposite query to all other media query cases:
such as all OTHER media queries need to have a and (min-height: 401px) appended to each of their cases, so they do not overwrite the case above.
cheers
Can I specify a rule like "all viewports having max width 640px or the body tag(or other tag) having a class named touch" will have the following css rules. Something like:
#media (max-width: 768px), .touch {
}
Thanks!
Edit: And because the rules are long I don't want to separate them to 2 parts and repeat the rules in these 2 parts.
#media all and (max-width: 768px) {
.touch { background: blue; }
}
No you can't do something like #media all and (max-width: 768px) and (.touch=true)
or has class .touch in dom, etc
Here is a list of the acceptable media queries from W3
width height device-width device-height orientation aspect-ratio
device-aspect-ratio color color-index monochrome resolution scan grid
http://www.w3.org/TR/css3-mediaqueries/
I´m using the following in css:
#media screen and (max-width: 400px){
.details-container {width: 121%;}
}
#media screen and (max-width: 640px){
.details-container {width: 201%;}
}
If i try a resolution under 400px, it takes the 640px css as reference, why?
A screen of 400px fits inside both your queries, that means it will get both values but the last one set will prevail per CSS cascading rules.
You can flip the order of the queries or specify a min-width in the second one
#media screen and (max-width: 400px){
.details-container {width: 121%;}
}
#media screen and (min-width: 401px) and (max-width: 640px){
.details-container {width: 201%;}
}