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 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_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4 {
width: 50%!important;
margin-right: 0 !important;
}
.et_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4:nth-of-type(even) {
width: 50%!important;
margin-right: 0 !important;
}
}
The CSS snippet below is for achieving the same result with the Divi Builder plugin (on a non-Divi theme site):
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
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.
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.