Mobile media queries in landscape mode?

Question

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

Answer 1

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 :-)

Answer 2

What about this combination of media-query + viewport height ?

video {
    width: 100%;
}
@media screen and (orientation:landscape) {
   video {
      height: calc(100vh - 110px);
   }
}

100vh = 100% of your viewport height.

110px is the height of my navigation bar, (just need to adapt it to your dimensions)