Divi – 5 column gallery on desktop and 2 on mobile

Divi – 5 column gallery on desktop and 2 on mobile

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.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. I keep getting blocked from your pages due to “spam” when I’m just trying to read the articles.

    • Hi How Annoying.

      Sorry to annoy you. Could you please advise which one is blocking you? Also where in the world you are so I can have a look at my lists and move you over to the whitelist? Thanks!

New tutorials

Why no ads?

Hi, I'm PK, and I maintain and publish content on this site for two reasons.

  1. To give back to the community. I learned so much from people's tutorials and StackOverflow that I wanted to contribute and help others.

  2. To provide a more structured learning experience. People struggle to find the course that guides them from start to finish, based off of real life experience, and my courses provide that.

The only "ads" I have here are for my own courses, and maybe an affiliate link, but that's it. They fund the website resources and provide more motivation for me to produce better content.

Any bit of interest helps. Even sharing with your friends, suggesting my courses to your developer or designer, or subscribing to my YT channel, or joining our Discord. Thanks and I'll see you around!

There's a newsletter!

Sign up to the newsletter for the occasional updates on courses, products, tutorials, and sales.