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
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 |
|---|---|---|---|
| All | This is the default option and the shortcode will be visible on all devices. | – | – |
| Hidden on Phones | The shortcode will be hidden when the screen width is | < 765 px | hidden-sm |
| Hidden on Tables | The shortcode will be hidden when the screen width is | > 768 px and < 1024 px | hidden-tl |
| Hidden on Mega Tables | The shortcode will be hidden the when screen width | > 768 px and < 1080 px | hidden-tl-v2 |
| Hidden on Netbooks | The shortcode will be hidden when the screen width is | < 1024 px | hidden-nb |
| Hidden on Desktops | The shortcode will be hidden when the screen width is | < 1224 px | hidden-dt |
| Hidden on Mega Desktops | The shortcode will be hidden when the screen width is | < 1290 px | hidden-dt-v2 |
| Visible on Phones | The shortcode will be visible when the screen width is | < 765 px | visible-sm |
| Visible on Tablets | The shortcode will be visible when the screen width is | > 768 px and < 1024 px | visible-tl |
| Visible on Mega Tables | The shortcode will be visible when the screen width is | > 768 px and < 1080 px | visible-tl-v2 |
| Visible on Netbooks | The shortcode will be visible when the screen width is | < 1024 px | visible-nb |
| Visible on Desktops | The shortcode will be visible when the screen width is | < 1224 px | visible-dt |
| Visible on Mega Desktops | The shortcode will be visible when the screen width is | < 1290 px | visible-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.
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.
