Responsive Display

Display content based on the current layout

The [display] shortcodes let you choose which responsive layout you want some content to display in. The idea is that you can say "I only want this button to show in tablet mode", or "I only want this lightbox image to show in desktop mode". Resize the window and a different alert will display below depending on which responsive layout is active.

Desktop Layout Active – This alert will display only when the window is 960px+ wide.

Tablet Layout Active – This alert will display only when the window is between 768px to 959px wide.

Mobile Landscape Layout Active – This alert will display only when the window is between 480px to 767px wide.

Mobile Portrait Layout Active – This alert will display only when the window is less than 480px.

Get The Code

[display_desktop]
This content will only be displayed when the window is 960px+ wide.
[/display_desktop]

[display_tablet]
This content will only be displayed when the window is between 768px
and 959px wide.
[/display_tablet]

[display_mobile_landscape]
This content will only be displayed when the window is between 480px
and 767px wide.[/display_mobile_landscape]

[display_mobile_portrait]
This content will only be displayed when the window is less than 480px wide.
[/display_mobile_portrait]