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.



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.


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

Related articles: