04. Page Builder & Shortcodes - Responsive Visibility

Responsive Visibility

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

To have access to this feature is very simple, when you create a shortcode with the page builder, if you see the Responsive Visibility Tab you can toggling content based on your needs, if this tab not present you can't toggle direct the element but you can show/hide the parent column or section.

You have four choice ( working on single mode or all togheter ):

  • Hide Large Devices - Hide/Show the content for devices greater or equal than 1200 pixel width viewport.
  • Hide Landscape/ Small Desktop Device - Hide/Show the content for devices greater or equal than 992 pixel and less or equal than 1199 pixel width viewport.
  • Hide Tablets Portrait - Hide/Show the content for devices greater or equal than 768 pixel and less or equal than 991 pixel width viewport.
  • Hide Phones - Hide/Show the content for devices less than 768 pixel width viewport.

Screencast