Menu icon Foundation
How tp Apply a different visibility setting using two values, screen size (small/meduim ) and orientation.

I'm trying to apply a different visibility setting using two values, screen size (small/meduim ) and orientation. For example

hide-for-small- landscape and show-for-medium-landscape.
Are far as I can tell from the support docs there is no way of targeting the size and orientation on the same element.

I'm having a problem with the Iphone6 and 6 plus.

I was wondering if anyone could help me with this issue.

Regards

Stephen

visibility setting orientation size

I'm trying to apply a different visibility setting using two values, screen size (small/meduim ) and orientation. For example

hide-for-small- landscape and show-for-medium-landscape.
Are far as I can tell from the support docs there is no way of targeting the size and orientation on the same element.

I'm having a problem with the Iphone6 and 6 plus.

I was wondering if anyone could help me with this issue.

Regards

Stephen

Rafi Benkual over 3 years ago

Not sure how you are trying to use it - have an example?

You can make a custom class and use a media query:

.hide-for-small-landscape {
  @media screen and (max-width: 39.9375em) and (orientation: landscape) {
    display: none;
  }
}

Or the Sass breakpoints:

@media screen and #{breakpoint(small-only)} and #{breakpoint(landscape)} {
        // Medium to extra large styles
      }