Display Two Divi Columns Side-by-Side on Mobile

|

Divi lets you lay out web pages in sections, rows, columns and modules. This lets you, for example, display two modules side-by-side, using a two-column row. However, it can be trickier to display two columns side-by-side on mobile. Here's a way to do it.

When you use a two column row, your modules will, on desktops, display side-by-side like so: 

But when you switch to the mobile view of the page, your columns will now be stacked, like so:

To instead display the modules side-by-side on mobile, we can set the columns to be 50% width (or less) on mobile. To do this, go into the row settings, and then in the settings for each column, go to:

Column Settings > Advanced > Custom CSS

Now enter the width in the custom CSS like so: 

When both columns are less that 50% of the row width, they will sit beside each other like so:

The modules are now side-by-side, but you may still want to adjust the spacing somewhat. To get a nice even spacing, first set the row width on mobile to 100%, like so:

Then set the mobile padding on the two columns. To get the same gap in the middle as at the sides, set the padding at the sides to be twice that of the padding in the middle. So the left column would be configured like so:

The right column would have the left and right padding amounts swapped.

This gives the result:

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

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 *.