Follow us

R5: Equalising the tabs in the tabs module | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

For Recipe #5 I have decided to create quite a simple and short tutorial but something I have seen asked in the Divi Facebook groups several times. Equalising the tabs in the tabs module in Divi so you don’t get that large ugly space at the end when you only have a few tabs.

NOTE: I am using Divi 2.6 for this tutorial so a few things have moved, primarily the place to add your custom css class is now in the custom css tab rather than at the bottom of the general settings tab.

Equalise the tabs in the divi tab module

So let’s get cooking!

 

Ingredients

 

The Divi Theme or Divi Builder Plugin from Elegant Themes

 

Cooking time

 

This should take you around 5 minutes max.

 

Preparation

 

The first thing we need to do is create our module. So add a new section with one column and then add a tabs module.

tabs-module

 

Next, open up the module settings select the custom css tab and give the module of a css class of equal-tabs, then save & exit. tabs-module1

 

Method

 

Now let’s get onto adding our content. Open up the tabs module and begin adding your tabs, I have added 5 but the number is up to you, you’ll just have to do your own math a little later! When you are done save & exit.

tabs-module2

So now you should have a default tabs module looking something like this.

tabs-module3

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*---------- [Equalise the Tabs] ----------*/

.equal-tabs .et_pb_tabs_controls li {
    width: 20%; /*change width of tabs here depending on the number of tabs you have*/
    text-align: center;
}

@media screen and (max-width: 768px){ /*change device breakpoint here depending on the number of tabs you have*/
.equal-tabs .et_pb_tabs_controls li {
    width: 100%; 
	text-align: center;
}
}

 

You are going to need to change the width value in the css above depending on the number of tabs you have. It’s a simple formula:

100 / number of tabs = width in %

So for example if you want 8 tabs then the formula would be:

100 / 8 = 12.5%

And that’s it, now you should have equal tabs.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!