How To Change The Number Of Columns On Mobile & Tablet In Divi Theme?

Finally! Here’s a solid and easy way to change the number of columns on mobile and tablet in Divi. By adding some custom CSS you’ll get full control over how many columns to display on mobile and tablet in each Divi row.

Unlock 2-6 columns on mobile and tablet with nice spacing between and beneath the columns. This is a more robust solution then some quick & dirty fixes, for example display:flex or width:50%,that are shared in various Facebook groups and blogs. We’ll stay consistent by using the same type of code that Divi already uses for desktop columns, and apply it for smaller screens too.

In the end of the article, I’ll show how you can save time by using the the Divi Global Presets to change the number of columns on mobile and tablet – without having to add custom CSS classes to your rows.

1. Add CSS to enable multiple columns on mobile and tablet in Divi

The first step to change the number of columns in Divi for mobile and tablet is to add some custom CSS.

1. Log in to your WordPress dashboard
2. Go to Divi » Theme Customizer » Additional CSS
3. Copy and paste the CSS below:

Pro tip: Copy the entire CSS snippet to access all the additional column options for mobile and tablet. If you only need one specific option, for example 2 columns on mobile, you only need to copy that specific part of the snippet (row 3-21 below).

/*** Change Mobile Columns by https://inalbania.al ***/
/* 2 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db #et-boc .two-col-mob .et_pb_column {
width:47.25% !important;
}

html .et-db #et-boc .two-col-mob .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .et-db #et-boc .two-col-mob .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}
/* 3 Columns Mobile https://inalbania.al*/
@media all and (max-width: 767px) {
html .et-db #et-boc .three-col-mob .et_pb_column {
width:29.6667% !important;
}
html .et-db #et-boc .three-col-mob .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .et-db #et-boc .three-col-mob .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}
/* 4 Columns Mobile https://inalbania.al*/
@media all and (max-width: 767px) {
html .et-db #et-boc .four-col-mob .et_pb_column {
width:20.875% !important;
}
html .et-db #et-boc .four-col-mob .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .et-db #et-boc .four-col-mob .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}
/* 5 Columns Mobile https://inalbania.al*/
@media all and (max-width: 767px) {
html .et-db #et-boc .five-col-mob .et_pb_column {
width:15.6% !important;
}
html .et-db #et-boc .five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}
html .et-db #et-boc .five-col-mob .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}
/* 6 Columns Mobile https://inalbania.al*/
@media all and (max-width: 767px) {
html .et-db #et-boc .six-col-mob .et_pb_column {
width:12.083% !important;
}
html .et-db #et-boc .six-col-mob .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .et-db #et-boc .six-col-mob .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}
/*** Change Tablet Columns By https://inalbania.al ***/
/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .one-col-tab .et_pb_column {
margin-right:0 !important;
width:100% !important;
}

html .et-db #et-boc .one-col-tab .et_pb_column:not(:last-child) {
margin-bottom:30px !important;
}
}
/* 2 Columns Tablet https://inalbania.al*/
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .two-col-tab .et_pb_column {
width:47.25% !important;
}
.two-col-tab .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}
html .et-db #et-boc .two-col-tab .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}
/* 3 Columns Tablet https://inalbania.al*/
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .three-col-tab .et_pb_column {
width:29.6667% !important;
}
html .et-db #et-boc .three-col-tab .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}
html .et-db #et-boc .three-col-tab .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}
/* 4 Columns Tablet https://inalbania.al*/
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .four-col-tab .et_pb_column {
width:20.875% !important;
}
html .et-db #et-boc .four-col-tab .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}
html .et-db #et-boc .four-col-tab .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}
/* 5 Columns Tablet https://inalbania.al*/
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .five-col-tab .et_pb_column {
width:15.6% !important;
}
.five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}

html .et-db #et-boc .five-col-tab .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}
/* 6 Columns Tablet https://inalbania.al*/
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db #et-boc .six-col-tab .et_pb_column {
width:12.083% !important;
}
html .et-db #et-boc .six-col-tab .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}
html .et-db #et-boc .six-col-tab .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}