By default, the width of ShortPoint Tabs Design Element are set based on the length of the text inside it.

This may end up with having multiple lines of the tabs. 

You may want to have only one line of the tabs. In this case the Make Tabs Responsive button is for you. You can enable this option, opening the Settings of your Tabs element in edit mode. By enabling this option you will have one line of the Tabs, each the same size:

If you have several tabs with the long title text, while the rest are way shorter, the Tabs will not be as good-looking as you may want.

However, there is a way to make it more eye-appealing, like this:

Now the tabs are more compact and the text in its cells fit the width we have set. If you would like to modify each tabs width separately, this article is for you.

TABLE OF CONTENTS

• Before we begin
• Step 1. Insert ShortPoint Tabs Design Element
• Step 2. Copy the custom CSS
• Step 3. Open the Tabs Custom CSS settings
• Step 4. Update the Tabs element with CSS code
• Result

Before we begin

• Please, make sure that Make Tabs Responsive option is disabled in the Setting tab of your Tabs design element. Otherwise, the CSS code we are going to use will not work.
  
  

Step 1. Insert ShortPoint Tabs Design Element

The Tabs Design Element can be easily added to your pages using ShortPoint Page Builder.

• Modern page:

You can start with adding a ShortPoint web part to your page by clicking big blue Insert button and selecting ShortPoint from the list of the web parts.

• Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

 Then, select the Tabs Design Element from your ShortPoint Page Builder menu:  

Step 2. Copy the custom CSS

Here it is the code you will need to use, please copy it:

/**
 * to customize the width for Tabs ShortPoint element you have to:
 * 1.) write specific width for each tab as follows
 * 2.) the sum of all widths written should be equal to 100%
 */

/* first tab */
.sp-type-tab.shortpoint-li.shortpoint-child:nth-child(1) {
width:20%
}

/* second tab */
.sp-type-tab.shortpoint-li.shortpoint-child:nth-child(2) {
    width: 20%;
}

/* third tab */
.sp-type-tab.shortpoint-li.shortpoint-child:nth-child(3) {
    width: 20%;
}

/* 4th tab */
.sp-type-tab.shortpoint-li.shortpoint-child:nth-child(4) {
    width: 20%;
}

/* ... tab */
.sp-type-tab.shortpoint-li.shortpoint-child:nth-child(5) {
    width: 20%;
}

Note: You can modify the code above and set a preferred width for every tab in your Tabs element, changing the percentage. Please make sure that the total percentage remains 100%.

Step 3. Open the Tabs Custom CSS settings

Edit the page. Click the cog wheel icon of the Tabs element to open the settings:

Switch to the Custom CSS tab:

Step 4. Update the Tabs element with CSS code

Paste the code into the Custom CSS field as shown in the animation below:

Note: Always check the number of your tab - it should be the same as the number of the nth-child in the parenthesis:

You may check how it will look like on your page by clicking the Preview button: 

Then, click Update and save the page.

Result

That's it. Now the tabs of our Tabs element have the different width, just as we modified it:

If you would like to have a more detailed instruction on how to use Custom CSS codes in ShortPoint Page Builder Elements, please visit this article: How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial).

Related articles: 

• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
• How to Make Single Tabs in Tabs Design Element Equal and Full Height
• How to Add a Link to a Specific Tab Element
• How to preserve a particular tab in the Tabs design element