lundi 20 avril 2015

CSS media query doesn't react to window height

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?

Aucun commentaire:

Enregistrer un commentaire