[Support request] Gallery styling broken since WP update 5.9

[Michaela]

Hi,
I just updated to WP 5.9 and now my formerly nicely styled gallery looks horrible.
From my reseach, WP must have changed some CSS stuff…
Could you maybe please help me?
This is my old CSS styling:

/* GALLERY */
/* Gutenberg FIX – image gallery item on last row too big */
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
  flex-grow: inherit;
}

/* Move gallery captions below image */
.wp-block-gallery .blocks-gallery-item figure {
    flex-direction: column;
}

.wp-block-gallery .blocks-gallery-item figcaption {
    position: relative;
    bottom: auto;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 10px 0 20px 0;
    text-align: center;
    background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
}

/* Padding inbetween gallery images */
.wp-block-gallery .blocks-gallery-item {
  padding: 0 5% 5% 0; 
}

Thanks a lot,
Michaela`

[David]

Hi there,

yeah they changed the HTML …. really quite annoying.
Can you share a link to a page where i can see the Gallery – and ill see if i can adjust the CSS to match the new selectors.

[Michaela]

H David,
Thanks a lot for helping me with this nuissance – really appreciated.
Regards,
Michaela

[David]

well they made a right mess of that.
Can you remove any CSS relating to the galleries. Might be easier to start afresh !

[Michaela]

Done, all CSS related to the galleries are removed.

[Fernando]

Hi Michaela,

I tried adjusting the selectors of your current CSS. Can you try adding this:

//* GALLERY */
/* Gutenberg FIX – image gallery item on last row too big */
figure.wp-block-gallery.has-nested-images .wp-block-image {
    flex-grow:inherit;
}

/* Move gallery captions below image */
figure.wp-block-gallery.has-nested-images .wp-block-image figure {
    flex-direction: column;
}

figure.wp-block-gallery.has-nested-images .wp-block-image figcaption {
    position: relative;
    bottom: auto;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 10px 0 20px 0;
    text-align: center;
    background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%, transparent);
}

/* Padding inbetween gallery images */
figure.wp-block-gallery.has-nested-images .wp-block-image {
  padding: 0 2.5% 5% 2.5%; 
}

Kindly let us know if it adheres to your preferences. Hope to hear from you soon! 🙂

[Michaela]

Hi Fernando,
Thanks a lot, (most of) it works now. Except for the first line of code:

/* Gutenberg FIX – image gallery item on last row too big */
figure.wp-block-gallery.has-nested-images .wp-block-image {
    flex-grow:inherit;
}

Any idea, how I can get that last gallery item to show up in the same size like all the others, and not stretched over the whole width of the gallery?

Cheers,
Michaela

[David]

Try this:

figure.wp-block-gallery.has-nested-images .wp-block-image {
    flex-grow: unset !important;
}

[Michaela]

Nope… it’s a stuborn one.

[David]

Aah in you CSS you have this comment:

//* GALLERY */ that extra / is breaking the code that comes immediately after it.

Change that to:

/* GALLERY */

[Michaela]

Jeez… always those little things. Thanks a lot!!!

Last question: how can I increase the horizontal space between my gallery items? Seems that my original ‘padding’ crops the image – but replacing it with ‘margin’ doesn’t do anything:

/* Margin inbetween gallery images */
figure.wp-block-gallery.has-nested-images .wp-block-image {
  margin: 0 10px 0 10px; 
}

[David]

Yeah its a lot more complicated – try this CSS:

@media (min-width: 600px) {
    figure.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
        margin-right: 40px;
        width: calc(25% - (40px * 0.75));
    }
}

Note if you want to adjust the 40px padding – you need to change both instances of 40px in the code.
The width property looks confusing:

width: calc(25% - (40px * 0.75));

To explain it calcs 25% minus 40px which is actually reduced to 40px * 75% – as the 4th column has its margins removed….

[Michaela]

Awesome, you guys are aces! Thank you so much!

[David]

So glad to hear that! And glad to be of help!

[Lucie]

Hi, I don’t know if my issue is related to the 5.9 update, but I thought I’d ask here in case it is:
I’m trying to add a bit of responsiveness to the standard Guten Gallery block. In desktop, 2 images side by side is fine, but in mobile I’d like to stack them. Here’s how the classes are described based on Google inspector:
wp-container-2 wp-block-gallery-1 wp-block-gallery alignwide has-nested-images columns-default is-cropped

And here’s the CSS I added, based on plenty of examples on this site. I added the !important property because it wasn’t working without it, but it’s not working with it either.

@media (max-width: 768px) {
.blocks-gallery-grid .blocks-gallery-image,
.blocks-gallery-grid .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {

width: 100% !important;
}
}

I’ve refreshed the page and cleared the (siteground)dynamic cache, but I can’t get the images to stack. Any hints welcomed.

[Author]

Posts