On a recent design job, the client asked for a 5 column row that had images and links to other pages. This is fine but the problem is that the Divi theme only has a maximum of a 4 column row. So I did a google search and found a few tutorials that showed how to create multi-column rows in Divi, but they have one thing in common, they use fixed width columns, which is great on desktops but terrible on smaller devices like mobile phones. the images below illustarte the issue when using fixed pixel widths.

Here is what it looked like using the provided CSS code.

Divi multi column with fixed width on large screen

Divi multi column with fixed width on mobile device

I hope you can see the problem; on the large screen the icons are all scrunched together on the left side of the screen, instead of being spread neatly across the screen. And, on the smaller screen rather than having one having one element above the other, they are a little messed up. And, the more columns you need, the more messed up it gets.

The solution

So the solution to this is to use percentages instead of pixels and also use CSS media queries to adjust the widths for different device sizes.

Here are the steps I took to create a five column row.

1. in the Divi builder, create a single column row.

2. Add a blub module

3. In the Blurb module Custom CSS settings, give it a CSS class name, in my case I gave each module a different name but you can use just one if you’d prefer.

4. Once you have made your general settings Save and Exit this module

5. Repeat this process 4 more times until you have five blurb modules in the row.

6. With that done, you now need to add some CSS code to your child theme style sheet file. The code is simple

.strategic-planning, .mentoring, .trust-fundraising, .corporate-fundraising, .event-management {
     float:left;     width: 20%;
}

That takes care of the larger laptop and desktop screens but what about the smaller screens. For that you need to use @media queries in the CSS. Copy the code below into your child theme style sheet.

@media only screen and (max-width: 600px) { 
.strategic-planning, .mentoring, .trust-fundraising, .corporate-fundraising, .event-management { 
   width: 50% !important; 
} 
}/*** END 600px CSS ***/ 
@media only screen and (max-width: 414px) { 
.strategic-planning, .mentoring, .trust-fundraising, .corporate-fundraising, .event-management { 
   width: 100% !important; 
} 
}/*** END 414px CSS ***/

The 600px code allows the columns to ‘reseat’ themselves with two columns side-by-side and then a further two columns side-by-side then one column on it’s own . It’s almost like having three seperate rows, but it isn’t.

The 414px code, makes each column full-width therefore it appears on the screen as if the columns are on top of each other.

More columns.

If you need 6/7/8 columns, all you need to do is adjust the % amount. So for a 6 column row you need 100%/6 = 16.66%. For 7 columns 100%/7 = 14.29% and for 8 columns 100%/8 = 12.5% and so on.

I hope this helps you and if you have any questions please do comment below and I’ll try to reply as soon as possible.