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 | Displays the element only on small devices (screen width less than 40.0625em) |
| .show-for-medium-up | Displays the element on medium and larger devices (screen width greater than 40.0625em) |
| .show-for-medium-only | Displays the element only on medium devices (screen width between 40.0625em and 64.0625em) |
| .show-for-large-up | Displays the element on large and larger devices (screen width greater than 64.0625em) |
| .show-for-large-only | Displays the element only on large devices (screen width between 64.0625em and 90.0625em) |
| .show-for-xlarge-up | Displays the element on xlarge and larger devices (screen width greater than 90.0625em) |
| .show-for-xlarge-only | Displays the element only on xlarge devices (screen width between 90.0625em and 120.0625em) |
| .show-for-xxlarge-up | Displays the element on xxlarge and larger devices (screen width greater than 120.0625em) |
The following example demonstrates the visibility of all .show- classes.
<p class="show-for-small-only">You are on a small device.</p>
<p class="show-for-medium-up">You are on a medium, large, xlarge, or xxlarge device.</p>
<p class="show-for-medium-only">You are on a medium device.</p>
<p class="show-for-large-up">You are on a large, xlarge, or xxlarge device.</p>
<p class="show-for-large-only">You are on a large device.</p>
<p class="show-for-xlarge-up">You are on an xlarge or xxlarge device.</p>
<p class="show-for-xlarge-only">You are on an xlarge device.</p>
<p class="show-for-xxlarge-up">You are on an xxlarge device.</p>
Hide Elements Based on Screen Size
The following classes hide elements based on the device (screen size).
| Class | Description |
|---|---|
| .hide-for-small-only | Hides the element only on small devices (screen width less than 40.0625em) |
| .hide-for-medium-up | Hides the element on medium and larger devices (screen width greater than 40.0625em) |
| .hide-for-medium-only | Hides the element only on medium devices (screen width between 40.0625em and 64.0625em) |
| .hide-for-large-up | Hides the element on large and larger devices (screen width greater than 64.0625em) |
| .hide-for-large-only | Hides the element only on large devices (screen width between 64.0625em and 90.0625em) |
| .hide-for-xlarge-up | Hides the element on xlarge and larger devices (screen width greater than 90.0625em) |
| .hide-for-xlarge-only | Hides the element only on xlarge devices (screen width between 90.0625em and 120.0625em) |
| .hide-for-xxlarge-up | Hides the element on xxlarge and larger devices (screen width greater than 120.0625em) |
<p class="hide-for-small-only">You are not on a small device.</p>
<p class="hide-for-medium-up">You are not on a medium, large, xlarge, or xxlarge device.</p>
<p class="hide-for-medium-only">You are not on a medium device.</p>
<p class="hide-for-large-up">You are not on a large, xlarge, or xxlarge device.</p>
<p class="hide-for-large-only">You are not on a large device.</p>
<p class="hide-for-xlarge-up">You are not on an xlarge or xxlarge device.</p>
<p class="hide-for-xlarge-only">You are not on an xlarge device.</p>
<p class="hide-for-xxlarge-up">You are not on an xxlarge device.</p>
Display Elements Based on Screen Orientation
The following classes hide elements based on the device (screen size).
We can set elements to be displayed or hidden based on the orientation. Desktop devices are generally landscape, but mobile and tablet devices can be either landscape or portrait. We can set elements to be hidden or displayed based on the user's device orientation:
| Class | Description |
|---|---|
| .show-for-landscape | Displays the element in landscape (hides in portrait) |
| .show-for-portrait | Displays the element in portrait (hides in landscape) |
The following example displays text content based on the orientation:
Example
<p class="show-for-landscape">Text is displayed in landscape.</p><p class="show-for-portrait">Text is displayed in portrait.</p>
Display and Hide for Touch Devices
You can display or hide elements based on whether the device supports touch.
| Class | Description |
|---|---|
| .show-for-touch | Displays the element on touch-enabled devices (hides on non-touch devices) |
| .hide-for-touch | Hides the element on touch-enabled devices (displays on non-touch devices) |
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>