Mobile media queries in landscape mode?

Issue

My mobile media queries dont work in landscape mode, maybe I am not displaying media only screen right. I am not using any frameworks , just regular CSS...

Could someone point me in the right direction? Thanks in advance

this is what I have right now

@media (min-width : 319px) and (max-width: 480px){
    //css here
}

not sure what I am doing wrong

Solution

There is a useful attribute/function in CSS called orientation which has two options:

1. Landscape
2. Portrait

And this is how you can use it:

@media screen and (orientation:landscape) {
   /* Your CSS Here*/
}

To attach the screen max and min width you can do something like this:

@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 480px) {
   /* Your CSS Here*/
}

See this reference: css expanding based on portrait or landscape screen size? and also a documentation about the @media queries on this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices

I hope this will help you :-)

Answered By - node_modules