Display Divi Columns Side-by-Side on Mobile

Written by Dan Mossop

Divi lets you lay out web pages in sections, rows, columns and modules. This lets you, for example, display modules side-by-side, by placing them in 2 columns within a row. On mobile, however, Divi will vertically stack the columns in a row. If you want to instead keep columns side-by-side on mobile, this tutorial will show you how. 

To make Divi keep two columns side-by-side on mobile, you can add some custom CSS into the row's settings. In particular, setting the row's display property to "flex" will cause the columns to stay next to each other, rather than stacking one above the other.

We'll show you how to do that in detail below. But first, let's take a quick look at how things appear before and after the changes.

Before

Normally, if you view a two column row in Divi on mobile, you'll see that the two columns have been stacked one above the other, instead of remaining side-by-side: 

After

Here's the effect we're trying to achieve instead, where we keep the divi columns side-by-side on mobile:

Show Divi Columns Side-by-Side on Mobile using CSS

To instead display the modules side-by-side on mobile, we can set them to use the CSS "flex" property. Here's how to do it.

Open your Page for Editing in the Visual Builder

Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.  

Open the Row's Settings

Locate the row you want to modify, or add it to your layout if you haven't already. Then, hover over the row to reveal the green row buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the row instead of hovering. Click the "Gear" icon to open the row's settings.

Set the Row to Flex Mode in its Custom CSS

Now, to display the divi columns side-by-side on mobile, we will set them to use the CSS "flex" property, which will lay out the columns next to each other.

To do this, click on the "Advanced" tab in the row settings, then under "Custom CSS", click on "Module Elements". Finally, in the "Main Element" box, enter: 

display: flex;

Save the Row Settings

To save the changes to the row, click the green check mark button at the bottom of the row settings. 

Save the Page

When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result

If you now take a look at your page on the front-end you should find that you now have 2 columns on mobile, each occupying 50% of the width, instead of stacked columns taking up a full 100% width.

You may need to make adjustments to make the columns look right in the smaller column width they are now allocated. But don't worry, all the usual module settings – font sizes, margin and padding will work as normal and can be used to tweak the design.

At this point, you may find our post on using responsive values in Divi module settings helpful – it explains how to modify settings on mobile without affecting your existing desktop design.

Show Divi Specialty Section Columns Side-by-Side on Mobile using CSS

If you're using Divi's specialty sections, and want all the elements to line up, then the above won't work, as the row settings are applied only to certain parts of the specialty section. To solve this we can instead apply the flex settings we need using the Section's custom CSS options instead. 

To do so, go to:

Section Settings > Advanced > Custom CSS > Free-Form CSS

And add: 

selector .et_pb_row {
    display: flex;
    flex-wrap: nowrap;
}

Like so:

Open your Page for Editing in the Visual Builder

Browse to the page you want to apply the change to. Then, in the WordPress admin bar at the top of the page, click the "Enable Visual Builder" button to open the page for editing in the Divi Builder.  

Open the Specialty Section's Settings

Locate the specialty section you want to modify, or add it to your layout if you haven't already. Then, hover over the section to reveal the orange section buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the section instead of hovering. Click the "Gear" icon to open the section's settings.

Set the Row to Flex mode using CSS

Now, click on the "Advanced" tab in the specialty section settings, then "Custom CSS". Under "Free-Form CSS", add the following CSS:

selector .et_pb_row {
    display: flex;
    flex-wrap: nowrap;
}

Save the Section Settings

To save the changes to the section, click the green check mark button at the bottom of the row settings. 

Save the Page

When you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.

View the Result

Now take a look at your specialty section. The effect will depend slightly on the particular specialty layout you're using, but as an example, a specialty section with an image module and a two column row would normally display the two columns below the image on mobile. With our changes, the image and the Divi columns all line up side-by side. 

Displaying multiple modules side-by-side in this way can lead to a tight fit on the narrow mobile devices, but you can use Divi's built in sizing and spacing options to adjust it to suit your design needs.

Conclusion

There we have it. Two ways to lay Divi columns out side-by-side. One that works on standard rows and one designed for rows embedded in specialty sections. I hope it helps, but please ask in the comments if you have any questions.

Enhance Your Divi Site with Dynamic Content

Looking to take your Divi site to the next level? The Divi Dynamic Content Extended plugin allows you to unlock dynamic content across more module fields. Tap into data from ACF, Meta Box, and Pods settings pages and make your Divi designs smarter and more efficient. Perfect for anyone working with complex layouts who want to keep their content flexible and responsive.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

4 Comments

  1. Hello,

    Thanks and do you know for only side by side row on the second column on special section ?

    Reply
    • Hey Greg, sorry I'm just responding now. Are you able to share a link to an example? There are quite a few possible combinations with the specialty sections and the answer will depend on how yours is set up. Thanks!

      Reply
  2. I followed the instructions and the sizes changed, but the modules are still stacked.

    Reply
    • Hey George, are you able to share a link to the page you're working on so that I can take a look? You can sent it privately via the contact form if you wish. Thanks! Dan

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts