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 we 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 the design elements you would like to hide, you will only need to add this class to this section. If there are other sections/rows/elements outside that section, then you will need to add the same class to all of them.


Update the sections/elements and save/republish your page(s).


Step 2: Apply custom CSS in Theme Builder


Open Theme Builder (Site contents > ShortPoint Dashboard > Theme Builder)


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 elements in 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: