Media Queries: check min-height and min-width?

Question

I am trying to change CSS on my page based on the min-height and min-width of the browser, so I am using this:

@media (min-height: 500px), (min-width: 580px) {
   /* CSS stuff */
}

But for some reason, this doesn't work. I can check for min-height and max-width (or vice versa) or for max-height and max-width at the same time, but checking for both min values doesn't seem to work.

I should specify this more: I want the browser to act if a min-height or a min-width becomes true. Using the and-operator will only work if both criteria are true.

Am I doing something wrong?

The comma in media queries is just like a comma in selectors: `.foo, .bar { color: red }` — cimmanon, Nov 07 '13 at 13:33
@cimmanon the Mozilla guide specifies this: "Comma-separated lists behave like the logical operator or when used in media queries." — The.Prophecy, Nov 07 '13 at 13:43
Possible duplicate of [CSS media queries: max-width OR max-height](http://stackoverflow.com/questions/11404744/css-media-queries-max-width-or-max-height) — nelek, Apr 29 '17 at 11:42
it was almost 4 years ago, but only a year before this question, there was the same one... answer : http://stackoverflow.com/a/11404776/3279496 — nelek, Apr 29 '17 at 11:44

score 86 · Answer 1 · edited Oct 04 '21 at 13:33

86

Use and instead of a comma, like this:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

edited Oct 04 '21 at 13:33

Liam

27,717
28
128
190

answered Nov 07 '13 at 13:26

Alexandra

1,096
6
4

4

Using the and operator will actually only activate the CSS stuff if both requirements are true, so if the browser height is below 500px and the width is below 580px. I want to activate it if any of the two cases are true. – The.Prophecy Nov 07 '13 at 13:36

score 10 · Answer 2 · answered Nov 07 '13 at 13:32

Have you added following meta tag in :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here is REf : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

After that use your media Query :

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

For media query details you can more info from http://stephen.io/mediaqueries/ for all iOS devices. If you have any other query let me know. Even you can get better idea from here http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

I actually had the viewport meta tag already included and as I said, it works for max+max and min+max, but not for min+min. — The.Prophecy, Nov 07 '13 at 13:41

score 10 · Answer 3 · edited Nov 03 '14 at 16:25

10

Use media query one inside other:

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}

edited Nov 03 '14 at 16:25

Andy

49,085
60
166
233

answered Nov 03 '14 at 16:17

Igor Cube

125
1
2

1

Nested media queries is still not fully supported as of January 2015, it has problems in IE and Safari. – Mattis Jan 16 '15 at 14:28

Media Queries: check min-height and min-width?

3 Answers3

Linked