How can we help you today?

Customize Visibility for Devices with Different Screen Resolutions

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

  • 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;
	}
}


  • For the devices with the viewport width is between certain values (medium devices): 
@media only screen and (min-width: 1001px) and (max-width: 1189px) {
	.test-section {
		display: none !important;
	}
}


  • For the devices with the viewport width is equal to some value or more (large devices):
@media only screen and (min-width: 1280px) {
	.test-section {
		display: none !important;
	}
}


Replace the width in the brackets with the one you need, and the .test-section with the custom CSS class you gave to your Design Elements in the Step 1 (please, do not forget to add a dot before the class).


Paste the code to the Custom CSS field. 


Click Apply and Publish to save your customizations.



That's it. Happy visibility managing!


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 10 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more