I want to use AND condition in media query. I use the the following code, but it didn't works
#media screen and (max-width: 995px AND max-height: 700px) {
}
It's missing close and open parenthesis before and after the Logical Operator
#media (max-width: 995px) and (max-height: 700px) { ... }
The correct and simpliest way to write this is:
#media screen and (max-width: 995px) and (max-height: 700px) {
}
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
From https://developer.mozilla.org/en/CSS/Media_queries/
...In addition, you can combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the associated style sheet is applied. This is the equivalent of a logical "or" operation.
Related
I know how to ask for max-width or max-height in CSS. I usually do it like this:
#media screen and (max-width: 1920) {}
or for height,
#media screen and (max-height: 1080) {}
but how would I write it if I wanted to ask if it was both max-height and max-width in the same rule?
If I understand you correclty, what you want to do is ask for both max-height and max-width in the same query string sentence. If that is the case you just need to create this css block:
#media screen and (min-height: 720px) and (min-width: 1920px) {
/* CSS rules here*/
}
Let me know if that is what you needed.
If you want to ask for one OR the other just just replace and for a comma.
You can use "and" to combine parenthetical condition statements.
#media screen and (max-width: 1920px) and (max-height: 1000px) { ... }
You could use the && selector
(max-width: 1920) && (max-height: 1000px) {}
I swear I had this working, but it's not. Is such a thing possible?
I don't want to prefix the 100's of styles with body:not(.phone)
Thank you.
#media only screen and (max-width: 768px) and (body:not(.phone)) {
}
NO. That's not how can do with #media queries. You must use like below:
#media only screen and (max-width: 768px) {/*css rules not applicable before curly brace*/
body:not(.phone){/*css rules must be within curly braces*/
color: #f00;
}
}
So, what you mean with #media queries is not possible.
Best way to apply media query for same width and different heights ?
For example i have this sample code
#media screen and (max-width: 1366px), screen and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
and
#media screen and (max-width: 1366px), screen and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
The problem is, even on 1366 X 657 the article#chapterthankyou{
width:984px;
} style is applied.
How can i accurately apply height width conditions ? Thanks
You are close, but according to this article on the MDN, you are a little off with your logical operators.
For your code, try using this:
#media screen
and (max-width: 1366px)
and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
And...
#media screen
and (max-width: 1366px)
and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
If this still does not work, then refer here for a list of different media queries, which you might find useful.
What is the difference between
#media all and (min-width: 500px) {
// some css
}
and
#media (min-width: 500px) {
// some css
}
Quite often I see the first declaration, but is there any benefit of including all?
There is no benefit. According to MDN:
Unless you use the not or only operators, the media type is optional
and the all type will be implied.
The all type is implied, so #media (min-width: 500px) is interpreted as #media all and (min-width: 500px) and the two statements are equivalent. The latter is just needlessly specific.
Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.