Multiple media-queries: max-width or max-height

1
votes

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)

2
cssmedia-queries

2 Answers

7
votes

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;}
}
5
votes

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;}
}