How can we help you today?

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

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: 


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 65 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more