Ris Ris - 4 months ago 7
CSS Question

Mobile media queries in landscape mode?

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


There is a usefull 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 refference: 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 :-)