YouTip

* * * ## Show Elements by Screen Size The following classes show elements based on the device (screen size). | Class | Description | | --- | --- | | .show-for-small-only | Shows elements only on small devices (screen width less than 40.0625em ) | | .show-for-medium-up | Shows elements on medium and larger devices (screen width greater than 40.0625em) | | .show-for-medium-only | Shows elements only on medium devices (screen width between 40.0625em and 64.0625em) | | .show-for-large-up | Shows elements on large and larger devices (screen width greater than 64.0625em) | | .show-for-large-only | Shows elements only on large devices (screen width between 64.0625em and 90.0625em) | | .show-for-xlarge-up | Shows elements on xlarge and larger devices (screen width greater than 90.0625em) | | .show-for-xlarge-only | Shows elements only on xlarge devices (screen width between 90.0625em and 120.0625em) | | .show-for-xxlarge-up | Shows elements on xxlarge and larger devices (screen width greater than 120.0625em) | The following example demonstrates the visibility of all the `.show-` classes above.

You are on a small device.

You are on a medium, large, xlarge, or xxlarge device.

You are on a medium device.

You are on a large, xlarge, or xxlarge device.

You are on a large device.

You are on an xlarge or xxlarge device.

You are on an xlarge device.

You are on an xxlarge device.

[Try it »](#) * * * ## Hide Elements by Screen Size The following classes hide elements based on the device (screen size). | Class | Description | | --- | --- | | .hide-for-small-only | Hides elements only on small devices (screen width less than 40.0625em ) | | .hide-for-medium-up | Hides elements on medium and larger devices (screen width greater than 40.0625em) | | .hide-for-medium-only | Hides elements only on medium devices (screen width between 40.0625em and 64.0625em) | | .hide-for-large-up | Hides elements on large and larger devices (screen width greater than 64.0625em) | | .hide-for-large-only | Hides elements only on large devices (screen width between 64.0625em and 90.0625em) | | .hide-for-xlarge-up | Hides elements on xlarge and larger devices (screen width greater than 90.0625em) | | .hide-for-xlarge-only | Hides elements only on xlarge devices (screen width between 90.0625em and 120.0625em) | | .hide-for-xxlarge-up | Hides elements on xxlarge and larger devices (screen width greater than 120.0625em) |

You are not on a small device.

You are not on a medium, large, xlarge, or xxlarge device.

You are not on a medium device.

You are not on a large, xlarge, or xxlarge device.

You are not on a large device.

You are not on an xlarge or xxlarge device.

You are not on an xlarge device.

You are not on an xxlarge device.

[Try it »](#) * * * ## Show Elements by Screen Orientation The following classes hide elements based on the device (screen size). We can set whether elements are shown or hidden in different orientations. Desktop devices like laptops are generally in landscape orientation, but mobile phones and tablets can be in landscape or portrait orientation. We can set elements to show or hide based on the orientation the user is holding their phone: | Class | Description | | --- | --- | | .show-for-landscape | Shows elements in landscape orientation (hidden in portrait) | | .show-for-portrait | Shows elements in portrait orientation (hidden in landscape) | The following example displays text content based on the orientation used: ### Example

Text is only displayed in landscape.

Text is only displayed in portrait.

[Try it »](#) * * * ## Show and Hide for Touch Screen Devices You can show and hide elements based on whether the device supports touch. | Class | Description | | --- | --- | | .show-for-touch | Shows on touch-enabled devices (hidden on non-touch devices) | | .hide-for-touch | Hides on touch-enabled devices (shown on non-touch devices) | The following example displays text content based on whether the device supports touch: ### Example

Your device supports touch.

Your device does not support touch.

[Try it »](#)