Visibility Classes

Visibility classes let you show or hide elements based on screen size or device orientation. You can use visibility classes to control which elements users see depending on their browsing environment.


This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.


Show by Screen Size

In this example, we use the show visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

HTML

<p class="panel"> <strong class="show-for-small-only">This text is shown only on a small screen.</strong> <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong> <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong> <strong class="show-for-large-up">This text is shown on large screens and up.</strong> <strong class="show-for-large-only">This text is shown only on a large screen.</strong> <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong> <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong> <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong> </p>

Rendered HTML

This text is shown only on a small screen. This text is shown on medium screens and up. This text is shown only on a medium screen. This text is shown on large screens and up. This text is shown only on a large screen. This text is shown on xlarge screens and up. This text is shown only on an xlarge screen. This text is shown on xxlarge screens and up.

Hide by Screen Size

This example shows the opposite: It uses the hide visibility classes to state which elements should disappear based on your device's screen size or orientation. Users will see elements on every browser except those that meet these conditions.

HTML

<p class="panel"> <strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong> <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong> <strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong> <strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong> <strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong> <strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong> <strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong> <strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong> </p>

Rendered HTML

You are not on a small screen. You are not on a medium, large, xlarge, or xxlarge screen. You are not on a medium screen. You are not on a large, xlarge, or xxlarge screen. You are not on a large screen. You are not on an xlarge screen and up. You are not on an xlarge screen. You are not on an xxlarge screen.

Orientation Detection

This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.

HTML

<p class="panel"> <strong class="show-for-landscape">You are in landscape orientation.</strong> <strong class="show-for-portrait">You are in portrait orientation.</strong> </p>

Rendered HTML

You are in landscape orientation. You are in portrait orientation.

Touch Detection

Finally, there are visibility classes to hide or show content based on whether a device supports touch (as determined by Modernizr).

HTML

<p class="panel"> <strong class="show-for-touch">You are on a touch-enabled device.</strong> <strong class="hide-for-touch">You are not on a touch-enabled device.</strong> </p>

Rendered HTML

You are on a touch-enabled device. You are not on a touch-enabled device.


Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/visibility";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »