- This topic has 3 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
-
Posts
-
Hi, I’ve tried endlessly to try and create galleries of images that are spaced closer together. Copied CSS from a half dozen other posts in the forum but to no avail. I’ve changed container spacing in the customizer as well, but nothing seems to effect the spacing between images or the blocks.
Here’s an example: https://curators.live/test/
First section is WordPress Gallery, second section is individual images in columns, 3rd section is what I’m trying to replicate with the images spaced close together (this 3rd section is made with the Envira Gallery (premium) plugin which I don’t want to use).
Thanks!
Customer Support
Hi there,
yeah the core Galleries block really didn’t consider gutters – its tricky but try this CSS:
/* Set default gap of 5px */ .wp-block-gallery .blocks-gallery-item { margin: 0 5px 5px 0; } /* adjust gap for 3 column gallery */ /* if above 5px is adjusted then the below 5px need to be matched */ @media (min-width: 600px) { .wp-block-gallery.columns-3 .blocks-gallery-item { width: calc(33.33333% - 5px); margin-right: 5px; } .wp-block-gallery.columns-3 .blocks-gallery-item:last-child { margin-right: 0; } }It does mean you need to add an additional CSS rule for each different column count. For example this will update the column gallery:
@media (min-width: 600px) { .wp-block-gallery.columns-4 .blocks-gallery-item { width: calc(25% - 5px); margin-right: 5px; } .wp-block-gallery.columns-3 .blocks-gallery-item:last-child { margin-right: 0; } }Super helpful, this works, thanks!
Glad to be of help
- You must be logged in to reply to this topic.
