Foundation CSS visibility


May 04, 2021 14:00 Foundation5


Table of contents


Foundation CSS visibility


The elements are displayed according to the screen size

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

Class Describe
.show-for-small-only Only elements are displayed on small devices (screen width is 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 Only elements are displayed 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 Only elements are displayed on large devices (screen width between 64.0625em and 90.0625em)
.show-for-xlarge-up Display elements on larger and above devices (screen width greater than 90.0625em)
.show-for-xlarge-only Only display elements on larger and above devices (screen width between 90.0625em and 120.0625em)
.show-for-xxlarge-up Display elements on very large and above devices (screen width greater than 120.0625em)

The following example demonstrates the visibility .show-

<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 out . . .


Hide elements based on screen size

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

Class Describe
.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 larger and above devices (screen width greater than 90.0625em)
.hide-for-xlarge-only Hide elements only on larger devices and above (screen width between 90.0625em and 120.0625em)
.hide-for-xxlarge-up Hide elements on oversized 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 out . . .


The elements are displayed according to the orientation of the screen

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

We can set whether elements are displayed or hidden in different directions. Desktop devices such as notebooks are generally landscaped, but mobile phones and tablet devices can be landscape or portrait, we can set elements to hide and display according to the direction taken by the user's phone:

Class Describe
.show-for-landscape Display elements when landscaped (portrait hidden)
.show-for-portrait Display elements at portrait (horizontally hidden)

The following example displays text content in the direction in which it is used:

Instance

< p class s "show-for-landscape" and text is displayed only horizontally. < /p >
< p class s "show-for-portrait" and the text is displayed in portrait only. < /p >

Try it out . . .

Touch-screen devices are displayed and hidden

You can display and hide elements depending on whether the device supports touch.

Class Describe
.show-for-touch Show on touch-screen-supported devices (hidden on unsupported devices)
.hide-for-touch Hide on touch-screen-supported devices (display on unsupported devices)

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

Instance

< p class- "show-for-touch" and your device supports touch screens. < /p >
< p class- "hide-for-touch" and your device does not support touch screens. < /p >

Try it out . . .