CSS media queries: max-width And max-height

Question

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

Possible duplicate of [CSS media queries: max-width OR max-height](http://stackoverflow.com/questions/11404744/css-media-queries-max-width-or-max-height) — Manmeet S. Oberoi, Jan 31 '17 at 07:06

score 4 · Accepted Answer · answered Jan 31 '17 at 07:00

4

It's missing close and open parenthesis before and after the Logical Operator

@media (max-width: 995px) and (max-height: 700px) { ... }

answered Jan 31 '17 at 07:00

Lex

184
2
10

score 2 · Answer 2 · answered Jan 31 '17 at 06:59

2

The correct and simpliest way to write this is:

@media screen and (max-width: 995px) and (max-height: 700px) {

}

answered Jan 31 '17 at 06:59

Kevin Jimenez

436
2
10

score 0 · Answer 3 · answered Jan 31 '17 at 06:59

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.

CSS media queries: max-width And max-height

3 Answers3