In an effort to be mobile-friendly, Divi collapses your 4-column rows into 1 column on mobile. But sometimes the default one-column layout on mobile gets a little tired, or simply doesn’t work for your busy page elements. This is especially so when you have several four-column rows, all collapsing into one column on mobile.

The CSS snippet below collapses a Divi Page Builder four-column row into a two-column layout on mobile screens (and portrait tablet screens).

Add the “two-on-mob” CSS class to the relevant section or row first. Then use this CSS snippet:


/* ".two_on_mob" make 4 col rows not collapse to one on mobile */

@media (max-width: 479px){
.et_divi_builder #et_builder_outer_content .et_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4 {
    width: 47.25%!important;
    margin-right: 5.5% !important;
}
.et_divi_builder #et_builder_outer_content .et_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4:nth-of-type(even) {
    width: 47.25%!important;
    margin-right: 0 !important;
}

}

 

Where to paste the CSS snippet

Copy and paste the above snippet into one of the following two places (depending on where the rest of your custom CSS code is residing):

1) Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

divi theme options

2) If you are using a child theme, navigate to Appearance>Editor and paste the CSS snippet into your child theme’s stylesheet.

navigate to wordpress theme editor

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates. Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS). Click here to learn more about child themes and getting the most out of the Divi theme.

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules