.ten-columns .et_pb_module {width: 10%; float: left;} 
.nine-columns .et_pb_module {width: 11.11%; float: left;} 
.eight-columns .et_pb_module {width: 12.5%; float: left;} 
.seven-columns .et_pb_module {width: 14.28%; float: left;} 
.six-columns .et_pb_module {width: 16.66%; float: left;} 
.five-columns .et_pb_module {width: 20%; float: left;}


/** set different col width based on position **/
.six-columns:nth-child(2) .et_pb_module {width: 33.32%; float: left;}
/* 
OR TRY: .six-columns .et_pb_module:nth-of-type(2) {width: 33.32%; float: left;} 
Remember to adjust column number so it sum up to 100%

... write more custom col width rules for your need 
*/



@media (max-width:980px){ 
.ten-columns .et_pb_module {width: 20%;} 
.nine-columns .et_pb_module {width: 33.3%;} 
.eight-columns.et_pb_module {width: 25%;} 
.seven-columns.et_pb_module {width: 25%;} 
.six-columns .et_pb_module {width: 33.3%;} 
.five-columns .et_pb_module {width: 33.3%;}
}

@media all and (max-width: 767px) { 
.ten-columns .et_pb_module {width: 100%;} 
.nine-columns .et_pb_module {width: 100%;} 
.eight-columns .et_pb_module {width: 100%;} 
.seven-columns .et_pb_module {width: 100%;} 
.six-columns .et_pb_module {width: 100%;} 
.five-columns .et_pb_module {width: 100%;}
}
.ten-columns .et_pb_module {width: 10%; float: left;} 
.nine-columns .et_pb_module {width: 11.11%; float: left;} 
.eight-columns .et_pb_module {width: 12.5%; float: left;} 
.seven-columns .et_pb_module {width: 14.28%; float: left;} 
.six-columns .et_pb_module {width: 16.66%; float: left;} 
.five-columns .et_pb_module {width: 20%; float: left;}

@media (max-width:980px){ 
.ten-columns .et_pb_module {width: 20%;} 
.nine-columns .et_pb_module {width: 33.3%;} 
.eight-columns.et_pb_module {width: 25%;} 
.seven-columns.et_pb_module {width: 25%;} 
.six-columns .et_pb_module {width: 33.3%;} 
.five-columns .et_pb_module {width: 33.3%;}
}

@media all and (max-width: 767px) { 
.ten-columns .et_pb_module {width: 100%;} 
.nine-columns .et_pb_module {width: 100%;} 
.eight-columns .et_pb_module {width: 100%;} 
.seven-columns .et_pb_module {width: 100%;} 
.six-columns .et_pb_module {width: 100%;} 
.five-columns .et_pb_module {width: 100%;}
}

Paste the fallowing code
To use it simple use one of the predefined class like six-columns. Copy class name to a row -> advance -> custom css class field.

https://www.elegantthemes.com/blog/divi-resources/add-more-columns-to-your-divi-builder-posts-or-pages
https://stackoverflow.com/questions/2751127/how-to-select-the-first-second-or-third-element-with-a-given-class-name

0
Would love your thoughts, please comment.x
()
x