Divi theme is mobile friendly, and when it comes to making sure that the resultant websites built with Divi become mobile friendly, Divi will collapse the 4-column rows into 1-column on mobile.
This feature may not look as great as you may want, because it tends to make the web page longer for no reason.
In this article, I will show you how to collapse a Divi 4-column row into a two-column layout on mobile devices using the simple CSS snippet below.
First, add “four_to_two” CSS class to the relevant section or row. Then, add the CSS snippet below to your Divi Theme Options.
/* “.four_to_two” make 4 col rows not collapse to one on mobile */
@media (max-width: 479px){
.et_pb_section .et_pb_row_4col.four_to_two>.et_pb_column.et_pb_column_1_4 {
width: 50%!important;
margin-right: 0 !important;
}
.et_pb_section .et_pb_row_4col.four_to_two>.et_pb_column.et_pb_column_1_4:nth-of-type(even) {
width: 50%!important;
margin-right: 0 !important;
}
}
That’s it for now. To be able to receive more of these tips. Subscribe to my newsletter.
Doesn’t work at all
Hello,
May I know where the problem is? If you follow the tutorial, step by step, it should work. Because I use the same technique in all my Divi related projects.