Introduction

The Responsive Utility Shortcode gives you the ability to hide or show elements on the page responsively for different device sizes. It can be used for showing and hiding content by device using media query. Also included are options for toggling content when printed. The breakpoints for the different devices sizes are:

  • Large devices – desktops (≥1200px)
  • Medium devices – desktops (≥992px)
  • Small devices – tablets (≥768px)
  • Extra small devices – phones (<768px)

Visible On…

✔ Large Device
✔ Medium Device
✗ Medium Device
✔ Small Device
✔ Extra Small Device

Hidden On…

✗ Large Device
✔ Medium Device
✗ Medium Device
✗ Small Device
✗ Extra Small Device

*resize your browser window to see the Responsive Utility shortcode in action.

Explore More Shortcodes

[intense_content_section]
<h2>Introduction</h2>

The Responsive Utility Shortcode gives you the ability to hide or show elements on the page responsively for different device sizes. It can be used for showing and hiding content by device using media query. Also included are options for toggling content when printed. The breakpoints for the different devices sizes are:

<ul>
<li>Large devices - desktops (≥1200px)</li>
<li>Medium devices - desktops (≥992px)</li>
<li>Small devices - tablets (≥768px)</li>
<li>Extra small devices - phones (<768px)</li>
</ul>

[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h3>Visible On...</h3>

[intense_row]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_large="1"]
[intense_alert color="success"]
✔ Large Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_large="1"]
[intense_alert color="muted"]
✗ Large Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_medium="1"]
[intense_alert color="success"]
✔ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_medium="1"]
[intense_alert color="muted"]
✗ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_small="1"]
[intense_alert color="success"]
✔ Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_small="1"]
[intense_alert color="muted"]
✗ Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_extra_small="1"]
[intense_alert color="success"]
✔ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_extra_small="1"]
[intense_alert color="muted"]
✗ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[/intense_row]

<h3>Hidden On...</h3>

[intense_row]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_large="1"]
[intense_alert color="success"]
✔ Large Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_large="1"]
[intense_alert color="muted"]
✗ Large Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_medium="1"]
[intense_alert color="success"]
✔ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_medium="1"]
[intense_alert color="muted"]
✗ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_small="1"]
[intense_alert color="success"]
✔ Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_small="1"]
[intense_alert color="muted"]
✗ Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_extra_small="1"]
[intense_alert color="success"]
✔ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_extra_small="1"]
[intense_alert color="muted"]
✗ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[/intense_row]

*resize your browser window to see the Responsive Utility shortcode in action.
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]