In this article we will show you how to customize visibility of ShortPoint Design Elements, Rows and Sections on devices with different screen resolutions.

TABLE OF CONTENTS

• Before you begin
• Step 1: Add a custom CSS class to the ShortPoint Design Elements
• Step 2: Apply custom CSS in Theme Builder

Before you begin

• ShortPoint uses the following width breakpoints for visibility settings:
  • 992px and more - Desktop;
  • 768px to 991px - Tablet;
  • 767px and less - Mobile.

If these dimensions suit your needs, please set the visibility settings in the respective Visibility tab of the ShortPoint Design Elements. Check this solution article for more details: Managing Visibility of ShortPoint Design Elements.

• If you would like to set visibility for devices with other screen resolutions, this article is for you.

Step 1: Add a custom CSS class to the ShortPoint Design Elements

Edit the page.

Click the cog wheel icon to open settings of the ShortPoint Design Element/Row or Section, you would like to hide for a specific device.

Switch to the Custom CSS tab. 

Add the class name to the respective Class field, as shown below.

Note: If you have one Section on the page, that contains all Design Elements you would like to hide, you will only need to add this class to this Section. If there are other Rows/Design Elements outside that Section, then you will need to add the same class to all of them.

Update the Sections/Design Elements and save/republish your page(s).

Step 2: Apply custom CSS in Theme Builder

Open Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder and click Customize my site).

Navigate to Utilities > Custom CSS.

Copy the following custom CSS code:

• For the devices with the viewport width is equal to some value or less (small devices):

@media only screen and (max-width: 1000px) {
	.test-section {
		display: none !important;
	}
}

@media only screen and (min-width: 1001px) and (max-width: 1189px) {
	.test-section {
		display: none !important;
	}
}

@media only screen and (min-width: 1280px) {
	.test-section {
		display: none !important;
	}
}