By default, ShortPoint Tabs items are stacking on top of each other on mobile devices. In this article we will show how you can change its behavior.


Before:



After:




This article is for you if:

  • You have ShortPoint installed on your SharePoint sites.
  • You are a ShortPoint user with an active license.

Step 1: Open the ShortPoint Tabs' settings


Edit your page.


Click the cogwheel icon to open the settings of the Tabs Design Element.



The Settings tab will appear.



Step 2: Copy the custom CSS code


Here is the custom CSS code you will need to use for changing the default Tabs' behavior on mobile devices:


@media screen and (max-width: 768px) {
     .shortpoint-tabs-header [data-shortpoint-type=tab] {
         width: auto !important;
     }
 }


Please copy it.


Step 3: Update Tabs with code


Switch to the Custom CSS tab:



Paste the copied code to the Custom CSS field: 



Click Update and save the page.



Result


That's it. This is how it will look like on your page opened on mobile device: 



Related articles: