How to Prevent ShortPoint Tabs Stacking on Top of Each Other on Mobile Devices

By default, ShortPoint Tabs items are stacked on top of each other on mobile devices:

This article will demonstrate how to showcase your Tabs horizontally on mobile devices:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the custom CSS code
  • Step 3: Insert the Code Design Element
  • Step 4: Paste the Custom CSS
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Tabs Design Element on your SharePoint page.

Step-by-step Tutorial

Follow the steps below on how to prevent Tabs from stacking on mobile devices:

Step 1: Edit the ShortPoint Web Part

NOTEBefore starting, make sure you already have a Tabs Design Element on your page. You can check out How to Customize the Tabs Design Element to learn more about it.

Go to the SharePoint page you want to use and click Edit:

Click the ShortPoint tag:

Select the pencil icon:

Step 2: Copy the custom CSS code

Copy the custom CSS code below:

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

Step 3: Insert the Code Design Element

Click the plus icon to see the library of Design Elements:

Use the search bar to look for Code and select it:

Step 4: Paste the Custom CSS

Paste the code in the CSS field:

Switch to the Design tab:

Then, disable Sandbox Mode:

Step 5: Save

Once done, click the green check mark:

Click Save to apply all your changes:

Congratulations! Your Tabs will now be displayed horizontally on mobile devices:

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