Mobile VisibilityΒΆ

Zurb Foundation includes a series of visibility classes that allow you to hide or display content on various devices using ‘show/hide-on-x’ where “x” can be a phone,tablet or desktop. For example if we include the following snippet on the line corresponding to the device that you are currently using will be displayed

<strong class="show-on-desktops">You are on a desktop machine.</strong>
<strong class="show-on-tablets">You are on a tablet device.</strong>
<strong class="show-on-phones">You are on a smartphone like an iPhone or Android phone.</strong>

Conversely including

<strong class="hide-on-desktops">You are not on a desktop machine.</strong>
<strong class="hide-on-tablets">You are not on a tablet device.</strong>
<strong class="hide-on-phones">You are not on a smartphone like an iPhone or Android phone.</strong>

Will display the two lines corresponding to the devices that you are not using.

Previous topic

Modal Dialogs

Next topic

Responsive Design Patterns

This Page