Menu icon Foundation
hide-for-desktop or show-for-desktop

hi,
sorry for my English but I use google translator

I wish to display a different image depending on the device used (smartphone or desktop).
I need your help to understand how the class "hide-for-small" and "show-for-small". because when I made a few tries, it does not work.
If I understand the use of class
- To hide images on version "MOBILE" should be used class "hide-for-small"
- To display images on version "MOBILE", use the class "show-for-small"
- What class should I use for the image appears only on version of "DESKTOP" and not for version "MOBILE" ??

Thank you for your help

hide-for-smallshow-for-small

hi,
sorry for my English but I use google translator

I wish to display a different image depending on the device used (smartphone or desktop).
I need your help to understand how the class "hide-for-small" and "show-for-small". because when I made a few tries, it does not work.
If I understand the use of class
- To hide images on version "MOBILE" should be used class "hide-for-small"
- To display images on version "MOBILE", use the class "show-for-small"
- What class should I use for the image appears only on version of "DESKTOP" and not for version "MOBILE" ??

Thank you for your help

Ryan Brown about 5 years ago

Hi,

I quite new to Foundation but my understanding is that there are no Desktop or Mobile classes. It is all based on screen resolution in EM's, but obviously they will relate to devices.

These are refereed to as break points.

Visibility Class & Media Class Names
bower_components/foundation/scss/foundation/components/_visibility.scss

Visibility Ranges
bower_components/foundation/scss/foundation/components/_settings.scss

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

You can use this converter to establish the EM / Pixel ratio.

http://pxtoem.com/

With regards to showing images in a specific range only I would give each image one show visibility class for that range.

<strong class="show-for-small-only">This text is shown only on a small screen.</strong>

<strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>

So there is no need to hide the elements as you have specified a range to show.

Have a look here for some more examples.

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

I hope that help

Rafi Benkual about 5 years ago

To hide on a small device : hide-for-small-only

To show on medium and larger : show-for-medium-up

Use either one but not both.

Oleg Gryaznov about 5 years ago

Use show-for-touch and hide-for-touch classes.