Conditional media queries

Question

I need to resize and hide an element based on certain conditions, but I can't get it right.

Pseduo code:

If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y

I'm doing this:

@media only screen and (max-height: 400px) {
    /* hide */
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
    /* do X */
}
@media only screen and (max-height: 601px) {
    /* do Y */
}

...but it always defaults to the last condition: do Y

Answer 1

Your last condition should be min-height and not max-height. also does not need to set and (max-height: 600px) because the following MQ will match anyway

http://jsfiddle.net/rnrlabs/3r382qts/

@media only screen and (max-height: 100px) {
    .condition {
        display: none;
        visibility: hidden;
    }
}
@media only screen and (min-height: 101px)  {
    .condition {
        color: red;
    }
}
@media only screen and (min-height: 301px) {
    .condition {
        color: blue;
    }
}