Foundation CSS Visibility

Display elements based on screen size

The following classes display elements based on the device (screen size).

Class Description
.show-for-small-only Display elements only on small devices (screen width less than 40.0625em)
.show-for-medium-up Display elements on medium and above devices (screen width greater than 40.0625em)
.show-for-medium-only Display elements only on medium devices (screen width between 40.0625em and 64.0625em)
.show-for-large-up Display elements on large and above devices (screen width greater than 64.0625em)
.show-for-large-only Display elements only on large devices (screen width between 64.0625em and 90.0625em)
.show-for-xlarge-up Display elements on extra-large and above devices (screen width greater than 90.0625em)
.show-for-xlarge-only Display elements only on extra-large and above devices (screen width between 90.0625em and 120.0625em)
.show-for-xxlarge-up Display elements on ultra-large and above devices (screen width greater than 120.0625em)

The following example demonstrates all of the above.show-class visibility.

<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>

Try it Yourself »

Hide elements based on screen size

The following classes hide elements based on the device (screen size).

Class Description
.hide-for-small-only Hide elements only on small devices (screen width less than 40.0625em)
.hide-for-medium-up Hide elements on medium and above devices (screen width greater than 40.0625em)
.hide-for-medium-only Hide elements only on medium devices (screen width between 40.0625em and 64.0625em)
.hide-for-large-up Hide elements on large and above devices (screen width greater than 64.0625em)
.hide-for-large-only Hide elements only on large devices (screen width between 64.0625em and 90.0625em)
.hide-for-xlarge-up Hide elements on extra-large and above devices (screen width greater than 90.0625em)
.hide-for-xlarge-only Hide elements only on extra-large and above devices (screen width between 90.0625em and 120.0625em)
.hide-for-xxlarge-up Hide elements on ultra-large and above devices (screen width greater than 120.0625em) 
<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

Try it Yourself »

Display elements based on screen orientation

The following classes hide elements based on the device (screen size).

We can set whether elements are displayed or hidden in different orientations. Desktop devices such as laptops are generally landscape, but mobile phones and tablets can be landscape or portrait. We can show or hide elements based on the orientation in which the user holds their phone:

Class Description
.show-for-landscape Display elements in landscape (hidden in portrait)
.show-for-portrait Display elements in portrait (hidden in landscape)

The following example displays text content based on the orientation used:

Example

<p class="show-for-landscape">Text is only visible in landscape.</p>
<p class="show-for-portrait">Text is only visible in portrait.</p>

Try it Yourself »

Display and hide on touch screen devices

You can show and hide elements based on whether the device supports touch.

Class Description
.show-for-touch Display on devices that support touch (hide on devices that do not)
.hide-for-touch Hide on devices that support touch (display on devices that do not)

The following example displays text content based on whether the device supports touch:

Example

<p class="show-for-touch">Your device supports touch.</p>
<p class="hide-for-touch">Your device does not support touch.</p>
Try it Yourself »
other extensions