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