Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
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.
So let’s get cooking!
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.
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. 
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.
So now you should have a default tabs module looking something like this.
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. 
Michelle X
Hi, thanks for this great tutorial. Really helped me there. I have one issue in mobile view the tabs are lining ontop of each other but iin 25% width of screen? Its set to 100% width for mobile. Any ideas why this is happening? link to screanshot: https://cl.ly/b512efa2f4cb.
Thanks
Can’t tell with a screenshot, but try adding !important to your width property
Thanks a lot Michelle!
Hi Michelle,
Please ignore my prvious message, I found the solution.
Thanks again for your posts
Stan
Hi Michelle,
Thanks for your posts.
Can you tell me how can I remove the grey right part in my tab ? And do the 3 parts equals.
I tried the code but it didnt work.
http://new.neonima.fr/new/coaching/
Kind regards
Stan
Very helpful, thanks Michelle!
Welcome Lauren
HI Michelle,
I love this! Thanks for the tut – how can i align the tabs at the bottom?
Would really appreciate your help with this.
Website i’m installing this on is: https://cobusvermeulen.com/home/
Thanks
Lynn
You can use this code, but this positions absolutely so if you have varying length of content its going to look odd
.et_pb_tabs_controls {
top: 100%;
position: absolute;
width: 100%;
}
Hi Michelle, I am a newbie and just trying to finish my own site at the moment. I was having problems with the tabs and you equal-tabs helped. However, it looks great on a wide screen but the tabs go to the next line on a laptop screen and iPad. I have tried adjusting so many ways but I cant get it to work across everything. I used your entire code as below including @media screen). Any assistance would be greatly appreciated before I go nuts. PS I am only just learning about CSS. This is the page https://vbusiness.co.nz/services/
Cheers, Linda
That’s quite a few tabs! You may need to decrease the text size, module padding, row padding, and/or section padding on tablet views to fit everything you have there.
Its only 8 tabs as per what Michelle mentioned in her recipe. I have no padding anywhere in this module, have tried all % to get no “bit” at the end. Have decreased font sizes….. nothing seems to work.
The recipe was 5 tabs, not 8. Seems you have it sorted per my recommendations now.
Hi Michelle, Whilst this make my tabs equal in width, the height is now a problem. help please
I would need a link showing the issue to be able to help Ryan
Hello!
Your tutorials are a great help to me, putting together a divi site for a NGO I’m working with.
I’ve run into an issue – its all working great at full screen but as the screen size adjusts I’m seeing the text area get to thin:
http://52.50.163.199/?page_id=68
The boxes are resizing but the text isnt, could you point me in the right direction?
Dan you can adjust the line height and the font size for the tab title in the module design settings tab. Reduce the size for tablets and mobile
Hi Michelle, I used your code to do the same for the Filterable Portfolio Module.
/*———- [Equalise the Tabs in Portfolio Filterable Module] ———-*/
.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
width: 12.5%; /*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*/
.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
width: 100%;
text-align: center;
}
}
Thanks for sharing Jeff
Hi I have used this
Im wondering if you can look at speedy.menu /demo
My text simply will not align center
sorry on mobile that is
The tab text is centered for me, do you mean the content? if so add this:
.wp_cart_product_display_bottom {text-align: center;
}
Hi thanks for a great tutorial. i was wondering how i could use this in two instances on a web site, using it for three tabs on one page and four tabs on another page? Thanks again!!
You can duplicate the CSS and add in a custom class for each separate tab module, so like this:
.equal-tabs1 {styles
}
.equal-tabs2 {
other styles
}
Thank you Michelle!
Hello i want to add images in left side of tab but there is no option to add images only we can add text,i am trying to add from add media but it is not positioning on left side
how to position it on left any css code needed for this??
You can use the built in shortcodes to create columns within the text area like this:
[one_half]content here[/one_half][one_half_last]more content here[/one_half_last]
Hey- should this still work? Have tried in the child theme CSS and the standard custom CSS option and neither made the edit to the tab I have in place. Just wondering if in theory this should work since all the latest divi updates?
Yes it is still working for me
Worked beautifully! Looks much nicer, thank you
Some of my words are short and others are long so to have them equal looks sooooooo much better than before! I do have an odd number of tabs though. Any way you know of to fill up the last gap or change the background colour of the black space to match the inactive tabs so it doesn’t stand out?
Check the last paragraph of the post Chloe, it gives the calculation to adjust based on the number of tabs
Hi Michelle,
How would I change this if I didn’t want equal tabs, but wanted the tabs to occupy 100% of the width of the tab module?
Thanks,
Leslie
This should do it Leslie
ul.et_pb_tabs_controls {
width: 100%;
}
Michelle,
Is it possible to make those tabs centered?
I have only two tabs and wanted them to be in the centre of the website
Cheers!
You would need to center the actual module then Rafi, not sure off hand if that is an option within the module but if not setting a width and then using margin: 0 auto; should work
Thank you. That was a cool edit.
But what is you want to just center the regular tabs? Normally they are aligned left with that space to the right (I have 3 tabs) What would be nice is to be able to just center the tab controls and maintain the look and feel of them on responsive.
Thanks Eric, I will take a look when I get time
You can do the following via CSS if you have multiple tab containers with varying tab counts:
*/ One Item */
.equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(1) { width: 100%; }
/* Two Items */
.equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(2), .equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(2) ~ li { width: 50%; }
/* Three Items */
.equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(3), .equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(3) ~ li { width: 33.3333%; }
/* Four Items */
.equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(4), .equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(4) ~ li { width: 25%; }
/* Five Items */
.equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(5), .equal-tabs .et_pb_tabs_controls li:first-child:nth-last-child(5) ~ li { width: 20%; }
Reference: http://andr3.net/blog/post/142
Thanks Marty, very helpful for our Divi Chefs
Michelle, this is great. But I miss a – responsive – vertical equalising. Try to fill each tab with a different text. 10 words, 20 words, 30 words, 40 words an 50 words. The wohle site will change ist length.
Thanks
Thomas
Hi Thomas.
Here is a media query for smaller devices, I will update the tutorial now
@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;
}
}
Hello Michelle,
One useful receipe again ! Thank you.
How do you calculate the device breakpoint if you have 3 tabs ?
Thanks. Catherine
Hi Catherine
The breakpoint depends on the length of your tab titles as the longer they are the higher the breakpoint will need to be so the text doesn’t get truncated. If you have a link I can take a look for you?