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…
Hidden On…
*resize your browser window to see the Responsive Utility shortcode in action.
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[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"]