Responsive Display

[raw]

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.

[display_desktop][alert show_close=”false” color=”#444444″]Desktop Layout Active – This alert will display only when the window is 960px+ wide.[/alert][/display_desktop]

[display_tablet][alert show_close=”false” color=”#ff8000″]Tablet Layout Active – This alert will display only when the window is between 768px to 959px wide.[/alert][/display_tablet]

[display_mobile_landscape][alert show_close=”false” color=”#00aeef”]Mobile Landscape Layout Active – This alert will display only when the window is between 480px to 767px wide.[/alert][/display_mobile_landscape]

[display_mobile_portrait][alert show_close=”false” color=”#92278f”]Mobile Portrait Layout Active – This alert will display only when the window is less than 480px.[/alert][/display_mobile_portrait]

[spacer height=”23px”]
[divider]
[spacer height=”24px”]
[/raw]

[raw]

Get The Code

[spacer height=”4px”]

[codebox line_numbers=”true” remove_breaks=”true” lang=”html”]
[[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]][/codebox]

[/raw]