--- layout: default title: Visibility Classes (Responsive) --- {{> header}}

#### .show-for-x

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

#### .hide-for-x

You are not on a medium screen or larger.

You are not on a large screen or larger.

#### .hide-for-x only

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

#### .hide, .invisible

Can't touch this.

Can sort of touch this.

#### .show-for-[portrait, landscape]

You are in landscape orientation.

You are in portrait orientation.

#### .show-for-sr

This text can only be read by a screen reader.

There's a line of text above this one, but it can only be read by a screen reader.

#### .show-on-focus

Press tab

Skip to Content