CODEWITHSUNDEEP
cssmedia-queries
Martin
Martin

Reputation: 22770

CSS media query OR operator (,) not working as expected

I have a media query for a website which depends on the width of the viewing window:

@media (max-width: 600px) {
...
}

This works perfectly.

I found that there was an issue with the site menu being cut off on certain devices because the height of the viewing window was not taken into account in the above statement, so I adjusted the statement accordingly (the menu is usually vertical but with the small screen or small height the menu should be changed to being horizontal) :

@media (max-width: 600px),  (max-height: 400px){
...
}

However this does not work, the max-width value works but if I resize my window (Firefox and Chrome) to a letterbox size (<400px) then it doesn't run the corresponding height rules contained in the media query.

I have also played with variations such as :

@media all and (max-width: 600px), all and (max-height: 400px){
...
}

But with no success.

I have read various articles about CSS height but I can't see why my rules above are not applying? Any answers?

Upvotes: 2

Views: 2211

Answers (2)

Martin
Martin

Reputation: 22770

The issue appears to be solved when applying the opposite query to all other media query cases:

such as all OTHER media queries need to have a and (min-height: 401px) appended to each of their cases, so they do not overwrite the case above.

cheers

Upvotes: 0

codegaze
codegaze

Reputation: 755

Tried 

@media (max-width: 600px) and (max-height: 400px) {
    body {
        background:#000;
    }
}

and worked fine!

UPDATE: the OR worked too http://jsfiddle.net/noj3u3xn/

@media (max-width: 600px), (max-height: 300px) {
    body {
        background:#000;
    }
}

Maybe you can share more of your css?

Upvotes: 3

Related Questions