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

36
votes

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?

3
htmlcssmedia-queries
The comma in media queries is just like a comma in selectors: .foo, .bar { color: red } – cimmanon
@cimmanon the Mozilla guide specifies this: "Comma-separated lists behave like the logical operator or when used in media queries." – The.Prophecy
Possible duplicate of CSS media queries: max-width OR max-height – nelek
it was almost 4 years ago, but only a year before this question, there was the same one... answer : stackoverflow.com/a/11404776/3279496 – nelek

3 Answers

74
votes

Use and instead of a comma, like this:

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

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*/
   }
}
8
votes

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