Stop Divi columns from breaking on mobile

Steps to stop your columns from breaking in Divi on mobile:

1. Add a class to the row > advanced CSS section (like “three-columns)
2. Add the class to your stylesheet or custom CSS area
3. Add .et_pb_column after the class
4. Adjust the with accordingly (like width: 33.33%!important for 3 columns on mobile)
5. You’ll also want to place this in a media query to make sure you don’t adjust the desktop version (see code below)

And that’s it! Easy peasy. And again, you can add this to all kinds of elements in Divi. Images, text boxes, icons, blurbs and more!

Here’s the CSS I wrote in the video:

@media only screen and (max-width: 980px) {
    .three-columns .et_pb_column {
    width: 33%!important;
}
}
@media only screen and (max-width: 479px) {
    .three-columns .et_pb_column {
    width: 50%!important;
}
}

Here are some example CSS class and code options you can use for any row moving forward!\

@media only screen and (max-width: 980px) {
.two-columns .et_pb_column {
width: 50%!important;
}
.three-columns .et_pb_column {
width: 33.33%!important;
}
.four-columns .et_pb_column {
width: 25%!important;
}
}