Menu icon Foundation
Show for Portrait

It seems that is you have an object that you use show-for-portrait, it hides on landscape regardless of size. Is that true? I want to show- or hide-for-portrait on medium, but it is also doing the same on small. I don't think there is a show-for-small-portrait, is there?

Any ideas how I can accomplish this with what already exists in the framework?

Thanks!

show-for-portrait

It seems that is you have an object that you use show-for-portrait, it hides on landscape regardless of size. Is that true? I want to show- or hide-for-portrait on medium, but it is also doing the same on small. I don't think there is a show-for-small-portrait, is there?

Any ideas how I can accomplish this with what already exists in the framework?

Thanks!

Karl Ward over 5 years ago

reply above = spam

Because of the technical nature of visibility classes, you can't usually combine them in a single element. Sometimes you can use a wrapper element to assign them in separate container with accumulative effect, but that won't work for this case. You would have to create your own media query with SCSS:

// Hide the element in portrait orientation, only on medium-up screens.
@media #{$medium-up} and (orientation: portrait) {
  .your-custom-class {
    display: none;
  }
}

Arthur Lee over 4 years ago

I'm a noobie to Foundation, but I think all you need to do is nest your divs.

<div class="show-for-medium-only">
<div class="show-for-portrait">
this should only show for med. portrait
</div>
<div class="show-for-landscape">
this should only show for med. landscape
</div>
</div>