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: 

• How to Make Single Tabs in Tabs Design Element Equal and Full Height
• How to Add a Gradient Underline below ShortPoint Tabs
• How to Modify the Width for ShortPoint Tabs