Menu icon Foundation
Combining Visibility Classes Possible?

I'm trying to apply two visibility classes for a section on my site. The two classes are hide-for-touch and show-for-large-up. This doesn't seem to work. I need this section to be responsive on desktops but never appear on touch devices. Could this be a bug?

visibilitydevicetouch

I'm trying to apply two visibility classes for a section on my site. The two classes are hide-for-touch and show-for-large-up. This doesn't seem to work. I need this section to be responsive on desktops but never appear on touch devices. Could this be a bug?

Karl Ward about 5 years ago

I don't think you can't combine visibility classes like that because of their technical nature, and I remember having to deal with it myself at some point. Besides, in your example the logic is paradox ...

iPad? hide-for-touch / show-for-large-up ... It will basically first hide it, and then display it because iPad is a large-up screen. You gotta remember that Foundation is mobile-first ... When using show-for-large-up, it will by default hide it for all screens, but then explicitly set it to display for large-up screens. Foundation doesn't know in what order you want your rules to apply.

You might need to create your own media query combo, or utilize the .no-touch class that is available in the body of your document. A quick fix would be to simply utilize an additional container element:

<div class=show-for-large-up>
  <div class=hide-for-touch>
    your-stuff-be-here
  </div>
</div>

... or SCSS:

.touch .your-element {
  display: none;
}
.no-touch .your-element {
  @extend .show-for-large-up;
}