R5: Equalising the tabs in the tabs module

by | Feb 4, 2016 | Tabs

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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.

Click here to see the live demo.

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

 

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 as shown in my demo.

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

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

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

You have successfully joined the waitlist!