Solved Removing extra space when <4 images in the Gallery module

Hey Perrine,

The Divi gallery module is fixed at four images per row, hence the gap. You should be able to sort it out with some CSS like this:

Code:

Log In or Sign Up to view this code.

The first three rules center the gallery items. That would leave you with equal gaps at both sides. The last, optional, rule makes the images wider to fill up the entire width, eliminating the gaps entirely.

Note that in its current form it would apply to all galleries, so you may want to replace the initial ".et_pb_gallery" on each rule with a CSS ID set on the gallery module to limit is scope.

An alternatively way to solve the issue is with my Divi Gallery Booster plugin, which adds a range of new options to the gallery module, including the ability to set the number of images per row, and adjust their sizes and the gaps between them:

https://divibooster.com/divi-gallery-booster/

Hope that helps!

 

Yeah, it won't work in either of those boxes, I'm afraid, as they don't accept full CSS code like the above (only parts of it). The usual place for it would be in the Theme Options, but since you don't have access to that we can't use it, of course.

Do you see the free-form CSS option in the gallery module settings at "Gallery Settings > Advanced > Custom CSS > Free-Form CSS"? If so, you should be able to enter it in there. If doing that, a slight improvement is the code below:

Code:

Log In or Sign Up to view this code.

By using "selector" instead of ".et_pb_gallery" in the CSS rules, the style will be applied to that gallery module only and won't mess up any other galleries you may be using.

If you can't see the free-form CSS box, or the code doesn't work in there, let me know.

Also, no worries on the plugin - I mainly mention it as some people prefer to avoid working with code (and it's good for business, of course), but I'm always happy to help either way.

 

All is not lost, Perrine!

While only being able to use the Main item and Gallery item boxes in the custom CSS limits us, there's still something we can do.

The CSS boxes in this area only let you add CSS properties, not full CSS rules, and apply them to a specific element. The "Gallery Item" box can be used to add CSS properties to the ".et_pb_gallery_item" element, which lets us replicate the second and fourth rule from the CSS I gave above. The first rule we can't use, since there's no box for the ".et_pb_gallery_items" (plural) element, and the third we can't use as there's no way to target just the ":last-child" gallery item.

But we can compensate by making the gallery images take up the full row (so that we don't need to center align them), and by setting an equal margin on either side of the gallery items (overriding Divi's normal approach of using the right margin only). That lets us get a center aligned gallery by modifying the gallery item element alone.

Here's the CSS to place in "Gallery Settings > Advanced > Custom CSS > Gallery Item":

Code:

Log In or Sign Up to view this code.

I've used CSS variables and calculations so that you can adjust the margin by modifying just the "--item-side-margin" line - everything else you can leave unaltered.

Note that you might get an "Expected RBRACE" notice in the custom CSS box. You can safely ignore that - Divi's code editor doesn't know about CSS variables, but the browsers do and will process it correctly on the front-end.

Hope that helps!

 

You're very welcome, Perrine!

Best of luck with the rest of the site