In This tutorial i show you how to Keep your columns on Mobile in Divi Theme in single row on all devices Desktop, Tablet and specially on mobile because on mobile devices columns not remain side by side in each other see the below Tablet and Mobile view of my required columns to be changed.
Keep Columns on Mobile in Divi
Here you can see I have four columns in one row and these are not remain next to each other on tablet and mobile devices. You can see below the Desktop, Tablet, and Mobile view of Divi Theme how columns position changes when screen sizes change. In this article, I show you how to keep Columns on Mobile in Divi.
Step By Step Guide How To do :
1. First, add Class in row setting by going Advance Tab in Row Setting for example (two-columns , three-columns , four columns).
2. Find the class which combining your columns by going to inspect element of your page it,s mostly (.et_pb_column) in Divi.
3. If you have multiple columns in row adjust the width by dividing (100/your columns) and get the % to add in the Additional CSS in Divi theme Customizer setting for example two columns change the width to (width: 50%!important;) and for three columns change the width to (width: 33.33%!important;) and for four column change the width to (width: 25%!important;).
4. You Must below code in Media query as well so you tablet and mobile view adjust accordingly.
CSS code for Tablet View
@media only screen and (max-width: 981px) {
.two-columns .et_pb_column {
width: 50%!important;
}
}
@media only screen and (max-width: 981px) {
.three-columns .et_pb_column {
width: 33.33%!important;
}
}
@media only screen and (max-width: 981px) {
.four-columns .et_pb_column {
width: 25%!important;
}
}
@media only screen and (max-width: 981px) {
.five-columns .et_pb_column {
width: 20%!important;
}
CSS code for Mobile View
@media only screen and (max-width: 479px) {
.two-columns .et_pb_column {
width: 50%!important;
}
}
@media only screen and (max-width: 479px) {
.three-columns .et_pb_column {
width: 33.33%!important;
}
}
@media only screen and (max-width: 479px) {
.four-columns .et_pb_column {
width: 25%!important;
}
}
@media only screen and (max-width: 479px) {
.five-columns .et_pb_column {
width: 20%!important;
}
}
You can apply as many code in Custom CSS in Divi to adjust your Columns by simply giving new class to the row. Get code as per your columns requirements.
Final Result After Adding Above CSS Code
To view the Live result and see how I keep columns side by side in Divi CLICK HERE