This article will be about styling the Divi Gallery module. By default, the Divi Gallery has 4 columns on desktop and 1 column on mobile. But in this tutorial, we will make it have 5 columns on desktop and 2 on mobile.

We will achieve this by using some custom CSS code.

The first thing that you need to do is to create your gallery. Create a new Divi page, add a new section, row and add a Gallery module into it. Then add at least 10 images into your gallery (so that we have at least 2 rows of images).

Divi Gallery Module

Then add a custom CSS class col-width to your Gallery module.

Gallery CSS Class

And below is the code that you need to use if you want to have your gallery have 5 columns on desktop. You need to add this code either to the custom CSS filed of the general Divi theme options. Or you can add it just into the particular page’s custom CSS code field.

@media (min-width: 981px){
	.et_pb_gutters1.et_pb_row .et_pb_column_4_4 .et_pb_grid_item:nth-child(4n+1) {
		clear: none; 
	}
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 20%;
	}
}
@media (max-width: 980px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 25%;
	}
}
@media (max-width: 479px){
	.et_pb_gallery.col-width .et_pb_grid_item.et_pb_gallery_item {
	width: 50%;
	}
}

Divi custom CSS field

As you can see in the CSS code above, there is a code for every width of the screen. Desktop screens usually have more than 980 pixels, while mobiles have less than 480 pixels.

We also have there the code for tablets that will make the gallery to have 4 columns on these devices.

If you are interested in a more simple process of how to make your Divi gallery have 5 columns, regardless of the screen size, check out this other tutorial.

Lastly, if you want to have no spacing between the gallery images, go into your Row settings and enable the options “Make This Row Fullwidth”, “Use Custom Gutter Width” and set the gutter width to 1. This will make the gallery images to extend across the full width of your page and have no spacing between the gallery items.

Gallery Sizing Options

Here you can see how a Divi gallery with these settings looks like on desktop (it has 5 columns):

Gallery 5 columns

And below you can see how it looks like on mobile (2 columns):

Gallery 2 columns

 

And you are done.

 

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!