Menu icon Foundation
How to specify landscape for small screen

How to specify landscape for small screen?
thanks

querymediamediaqueryLandscapeportraitscsscss

How to specify landscape for small screen?
thanks

Karl Ward over 5 years ago

What do you mean specify landscape? You can create a media query that will only apply styles for landscape orientation, like this in SCSS:

@media #{$landscape} {
   .myclass { font-size: 1.2em; }
}

Asif over 5 years ago

you could create a named query like this:

 $(document).foundation('interchange', {
  named_queries : {
    small_landscape : 'only screen and (max-width: 640px) and (orientation: landscape)'
  }
});

and then make use of "small_landscape" in your code, you can refer the interchange documentation:

http://foundation.zurb.com/docs/components/interchange.html

samjin over 5 years ago

Thanks for the replies. It really helped.
I just wanna clarify what problem I had for Karl. My site default font is pretty big and when it displays on landscape small screen(portrait is fine tho), the font is just way too big. I want to specify css classes for landscape small and medium screen only.
Hope that make sense. thank you.