How To Change The Number Of Columns On Mobile In Divi (With Global Presets)

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.

Before (1 column)

Divi displays one column on mobile by default

After (2-6 columns)

Display multiple columns in the same row on mobile in Divi

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 DiviMundo.com ***/

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
	.two-col-mob .et_pb_column {
		width:47.25% !important;
	}
	
.two-col-mob .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-mob .et_pb_column:not(:nth-child(2n)) {
			margin-right:5.5% !important;
	}
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
	.three-col-mob .et_pb_column {
		width:29.6667% !important;
	}

	.three-col-mob .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-mob .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
	.four-col-mob .et_pb_column {
		width:20.875% !important;
	}

.four-col-mob .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-mob .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Mobile */
@media all and (max-width: 767px) {
	.five-col-mob .et_pb_column {
		width:15.6% !important;
	}

	.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}

	.five-col-mob .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Mobile */
@media all and (max-width: 767px) {
	.six-col-mob .et_pb_column {
		width:12.083% !important;
	}

	.six-col-mob .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-mob .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

/*** Change Tablet Columns By DiviMundo.com ***/

/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.one-col-tab .et_pb_column {
		margin-right:0 !important;
		width:100% !important;
	}
	
		.one-col-tab .et_pb_column:not(:last-child) {
		margin-bottom:30px !important;
	}
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.two-col-tab .et_pb_column {
		width:47.25% !important;
	}

.two-col-tab .et_pb_column:nth-last-child(-n+2) {
		margin-bottom:0;
	}

	.two-col-tab .et_pb_column:not(:nth-child(2n)) {
		margin-right:5.5% !important;
	}
}

/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.three-col-tab .et_pb_column {
		width:29.6667% !important;
	}

.three-col-tab .et_pb_column:nth-last-child(-n+3) {
		margin-bottom:0;
	}

	.three-col-tab .et_pb_column:not(:nth-child(3n)) {
		margin-right:5.5% !important;
	}
}

/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.four-col-tab .et_pb_column {
		width:20.875% !important;
	}

.four-col-tab .et_pb_column:nth-last-child(-n+4) {
		margin-bottom:0;
	}

	.four-col-tab .et_pb_column:not(:nth-child(4n)) {
		margin-right:5.5% !important;
	}
}

/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.five-col-tab .et_pb_column {
		width:15.6% !important;
	}

.five-col-mob .et_pb_column:nth-last-child(-n+5) {
		margin-bottom:0;
	}
	
	.five-col-tab .et_pb_column:not(:nth-child(5n)) {
		margin-right:5.5% !important;
	}
}

/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
	.six-col-tab .et_pb_column {
		width:12.083% !important;
	}

	.six-col-tab .et_pb_column:nth-last-child(-n+6) {
		margin-bottom:0;
	}

	.six-col-tab .et_pb_column:not(:nth-child(6n)) {
		margin-right:5.5% !important;
	}
}

Available mobile columns options:

  • 1 column on mobile

    If you don’t change anything, the Divi row will display only one column on mobile.

  • 2 columns on mobile
  • 3 columns on mobile
  • 4 columns on mobile
  • 5 columns on mobile
  • 6 columns on mobile

Available tablet columns options

  • 1 column on tablet

    This is useful if you want to prevent Divi from displaying for example three columns on tablet when displaying six columns on desktop.

  • 2 columns on tablet
  • 3 columns on tablet
  • 4 columns on tablet
  • 5 columns on tablet
  • 6 columns on tablet

2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet

To apply the new column count for mobile and tablet you need to add the matching CSS class(es) to your Divi row. That will actually take less time than reading this paragraph of text.

  1. Enable the Divi Visual Builder on the page that you want to edit
  2. Edit the row (that’s the box with the green border) by clicking the cogwheel
  3. Go to Advanced » CSS ID & Classes » CSS Class
  4. Add one or two CSS classes, matching the number of columns that you want to use, from the table below.

Please notice: Sometimes, the Divi Visual Builder does not display the new column structure the correct way in backend. Save and preview in frontend to see the final result.

Number of columns

Mobile CSS class

Tablet CSS class

One

[no class needed]

one-col-tab

Two

two-col-mob

two-col-tab

Three

three-col-mob

three-col-tab

Four

four-col-mob

four-col-tab

Five

five-col-mob

five-col-tab

Six

six-col-mob

six-col-tab

The table above is actually a live example of this code using the classes “three-col-mob three-col-tab” to display three columns on tablet and three columns on mobile (the same as on desktop).

Examples of how to apply the CSS classes on your Divi rows

Just separate the mobile class and the tablet class with a simple space, for example: two-col-mob four-col-tab

Here are four examples of how you can apply the CSS classes to change the numbers of columns on mobile and tablet in your Divi rows. Just leave the CSS Class field empty if you want to use the default number of columns.

2 columns on mobile and 4 columns on tablet

2 columns on mobile and 4 columns on tablet in Divi

Add the CSS classes two-col-mob four-col-tab in the row settings to achieve this.

3 columns on mobile and 3 columns on tablet

3 columns on mobile and 3 columns on tablet in Divi

Add the CSS classes three-col-mob three-col-tab in the row settings to achieve this.

3 columns on mobile and 6 columns on tablet

3 columns in mobile and 6 columns in tablet

Add the CSS classes three-col-mob six-col-tab in the row settings to achieve this.

1 column on mobile and 2 columns on tablet

2 column in mobile and two columns in tablet

Add the CSS classes two-col-tab in the row settings (one column for mobile is default in Divi so no custom CSS is needed for that).

3. Pro Tip: Use Divi Global Presets To Change Number Of Columns on Mobile And Tablet

This last step is not necessary but it’s a nice way to speed up your design process by adding different mobile row structures to your Divi Global Presets library.

This way, you don’t need to add custom CSS classes each time that you want to change the number of columns in a row. Instead, you can just choose the row numbers that you want to use from the Presets dropdown when you add a new row.

Changing mobile row numbers with Divi Global Presets

  1. Make sure that you have added the custom CSS in the Theme Customizer (see step 1 above)
  2. Create a new row on a page, a post or in a layout in the Divi Library. It does not matter which column structure you choose for the row.
  3. Close the Insert Module modal and open the Row Settings by clicking the cogwheel
  4. Go to Advanced » CSS ID & Classes
  5. Enter the CSS Class(es) that you want to add to your preset (see step 2 above) – for example two-col-mob four-col-tab
  6. Now, click the Preset: Default toggle in the purple top bar of the Row Settings
  7. Click Create new preset from current styles
  8. Give your new Preset a clear name, for example 2 col mob | 4 col tab
  9. Make sure that Assign Preset To Default is set to NO and save by clicking the green checkmark button
  10. Repeat the process to add as many Row Presets you like.

That’s it! To change the number of columns on mobile and tablet, just click the Preset toggle in the row settings and choose one from your list.

Add column CSS classes to your row
1. Add CSS class(es) to your row.
Create global row presets
2. Create a new global preset.
Choose your mobile column structure

3. Use the presets on any page or post.

Related posts

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.