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

score 36 · Accepted Answer · edited Dec 29 '21 at 02:04

36

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

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

edited Dec 29 '21 at 02:04

danronmoon

3,814
5
34
56

answered Jun 27 '16 at 19:53

node_modules

4,790
6
21
37

thanks...what about (min-width : 319px) or (max-width: 480px), how do I know whats my min and max ? – Ris Jun 27 '16 at 19:55
1

@Ris You can sum it up like you already did with the min and max width. There is an helpfull documentation about it, maybe you want to see it: https://css-tricks.com/snippets/css/media-queries-for-standard-devices :) – node_modules Jun 27 '16 at 20:02

score 1 · Answer 2 · answered Apr 19 '18 at 17:55

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)

Mobile media queries in landscape mode?

2 Answers2