Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

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.




    Hi! Please consider signing up for my newsletter for... the occasional email about news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

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


    Default image
    Thomas Walker

    Hello, my name is Thomas and I'm a freelance WordPress developer. In my free time I like cycling and reading books. I also like learning new tips about Divi and web design.

    Articles: 1


    Leave a Reply

    Your email address will not be published.

      • 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!