2

This question is similar to CSS media queries: max-width OR max-height, but since my rep isn't high enough, I can't add a comment (question) to the reply and I want to add to the original question.

Like the poster in the other topic, I have media queries with certain specifications for DIVs.

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

Now, I want the center DIV to be 250px wide when the screen is 960px wide, but only 400px high. If I'd set the first media-query to this:

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

which query will my browser use? Will the min-height overrule the min-width? Or will it skip the min-height and go to the min-width query (960px)?

I've used Stack Overflow alot to find answers, but haven't posted any question so if this is incomplete, please let me know.

-edit- I entered the wrong condition (min-height instead of max-height)

Community
  • 1
  • 1
Doc
  • 177
  • 1
  • 3
  • 14

2 Answers2

8

it will use ALL of them as soon as the condition matches. so the rule used for .center would be the last one being defined (as usual in css, later definitions override the early ones)

But as I understand what you want to do with your query, wouldn't it be more like

@media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}
Ria Weyprecht
  • 1,275
  • 9
  • 19
  • So you're saying the min-width:460px and max-height:400px query should come AFTER the min-width:960px query in order to match all conditions? Even if the width of the window exceeds 960px? – Doc Dec 05 '13 at 13:14
  • you asked, which one will be used and I answered that all conditions will be used if they match. If you want the one with the max-height to be the most important then yes, you should write it last or make the selectors inside of it more important (body .center for example) – Ria Weyprecht Dec 05 '13 at 13:55
5

i hope to understand what u really need, but for join two rules i use this syntax, and this work for me:

@media only screen and (min-width:460px), (max-height:400px){
   .center{width:250px;}
}
rnd
  • 61
  • 1
  • 3