CODEWITHSUNDEEP
cssmedia-queriesconditional-statements
eozzy
eozzy

Reputation: 68680

Conditional media queries

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

Upvotes: 2

Views: 7649

Answers (4)

rnrneverdies
rnrneverdies

Reputation: 15637

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

Upvotes: 5

himanshu
himanshu

Reputation: 1797

@media only screen and (max-height: 400px) {
     .Submenu {display:none !important;}
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
    .Submenu {display:block;}
}
@media only screen and (min-height: 601px) {
     .Submenu {display:inline-block !important;}
}

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6253

Your last condition should be min-height and not max-height:

@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 (min-height: 601px) {
    /* do Y */
}

Upvotes: 1

idmean
idmean

Reputation: 14865

@media only screen and (max-height: 601px) {

should be 

@media only screen and (min-height: 601px) {

Because you want "If height is greater than or equal to 601px : do y" but max-height would set the maximum height.

Upvotes: 2

Related Questions