1. Home
  2. Configuring the Visibility for Devices

Configuring the Visibility for Devices

Updated on November 15, 2017

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
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.

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.

Did this answer your question?