The Visibility for Devices setting in shortcodes allows you to hide / show the shortcode for a specific screen width. This settings is useful when you need to hide / show a section of your webpage for mobile devices, for example.

In this article, we use two Page Section shortcodes. We want to show the first section only on desktops (screens bigger than 1024 pixels) and show the second section only on tablets and smaller devices (screens smaller than 1024 pixels).


Configuring the Visibility Settings

1Add two Row shortcodes and then add a Fancy Title shortcode inside each of them.

2Click “Edit this Row” in the first row to open the Row Settings.

3From Visibility for Devices, select Hidden on Netbooks option.

Configuring the visibility for devices - visibility for devices

4Click on Save Changes and publish or update the page to check the result. At this stage, when you resize the browser (smaller than 1024 px), the first row should be hidden.
5Click on Edit Row in the second row to open the Row Settings.
6From Visibility for Devices, select Visible on Netbooks option.
7Click on Save Changes and publish or update the page to check the result. At this stage, when the browser width is bigger than 1024 px, only the first row should be visible and when the browser width is smaller than 1024 px, only the second row should be visible.

Explanation of Visibility Options

The Visibility for Devices setting allows you to select 13 options. These options are explained well in the shortcode but we’ll add more detail here to clarify. The HTML Class column is explained in the Behind the Scene section.

Option Description Screen Width HTML Class

AllThis is the default option and the shortcode will be visible on all devices.
Hidden on PhonesThe shortcode will be hidden when the screen width is< 765 pxhidden-sm
Hidden on TablesThe shortcode will be hidden when the screen width is> 768 px and < 1024 pxhidden-tl
Hidden on Mega TablesThe shortcode will be hidden the when screen width> 768 px and < 1080 pxhidden-tl-v2
Hidden on NetbooksThe shortcode will be hidden when the screen width is< 1024 pxhidden-nb
Hidden on DesktopsThe shortcode will be hidden when the screen width is< 1224 pxhidden-dt
Hidden on Mega DesktopsThe shortcode will be hidden when the screen width is< 1290 pxhidden-dt-v2
Visible on PhonesThe shortcode will be visible when the screen width is< 765 pxvisible-sm
Visible on TabletsThe shortcode will be visible when the screen width is> 768 px and < 1024 pxvisible-tl
Visible on Mega TablesThe shortcode will be visible when the screen width is> 768 px and < 1080 pxvisible-tl-v2
Visible on NetbooksThe shortcode will be visible when the screen width is< 1024 pxvisible-nb
Visible on DesktopsThe shortcode will be visible when the screen width is< 1224 pxvisible-dt
Visible on Mega DesktopsThe shortcode will be visible when the screen width is< 1290 pxvisible-dt-v2

Behind the Scene

To understand the visibility setting better, it’s good to know what happens when you select one of the options. When one of the options is selected, an extra class will be added to the shortcode. These classes are linked with some CSS codes which hide / show the shortcode.

Example: When Hidden on Netbooks is selected, hidden-nb class will be added to the shortcode.

Configuring the visibility for devices - hidden on netbook

The CSS codes exist in the core-styles.css files of the Jupiter theme. These two files are the same, the only difference is that the second one is minified.

wp-content/themes/jupiter/assets/stylesheet/core-styles.css

wp-content/themes/jupiter/assets/stylesheet/min/core-styles.css (this file is mostly used by the theme)

To find the related codes, open one of the files in you text editor and search for hidden-nb.