[Resolved] Gallery alignment

[Daniele]

I’m using the same identical settings in this two pages:

https://abracadabra.photography/portfolio/fashion/
https://abracadabra.photography/portfolio/beauty/

But in the first the layout is broken

I inspected the page and I saw the only difference is that the gallery is displayed with figure (first case) and ul (second case)

I don’t know why…they are both Gutenberg galleries.

Please help

I’m using last generate press version with Gutenberg 6.5.0

[Tom]

Hi there,

I’m not seeing any difference between the two pages. Did you get this fixed?

[Daniele]

Hi,
They are shifted to the right.

If you see it from mobile the difference is more marked

[David]

Hi there,

i think your Cache plugin is messing with the order of the CSS. Try flushing the cache and see if it resolves the issue, if not add this CSS – it should overcome the problem:

ul.blocks-gallery-grid {
    margin-left: 0 !important;
}

[Daniele]

Hi David,
tried to disable cache, the issue persist.

I solved adding the CSS, maybe is something you have to look to for the next release.

thanks for your help

[David]

Its odd – the same CSS is being applied to both galleries and the CSS rules for the gallery are more specific for zeroing out the margin so it should work as standard.
I’ll do some other tests.
Glad to be of help

[Daniele]

I think there’s something new with the galleries..It happened when I updated the galleries with new images.
The old galleries always worked as usual…

Notice that I use the Gutenberg plugin (now 6.5.0), that is always some versions ahead to the official wordpress gutenberg

[David]

6.5 added caption support to the Gallery Block and there have been some other general changes to the editor. This may have interfered with the CSS as well. I’ll also take a look to see if there CSS changed when they added the Figure tag wrapper to the gallery images.

But here was the issue:

You can see the .wp-block-gallery CSS is being overwritten by the UL css at the bottom.
wp-block-gallery as a class beats the UL on specificity so should be applied. The only way it wouldn’t be is if the CSS order has been scrambled. Which can happen during cache/optimization.

[Daniele]

I understand…I will try disable Cloudflare cache as well to see if the issue disappear…

however with the CSS added to style.css is solved.

thank you!

[David]

You’re welcome – ill also check the CSS – theres a possibility the issue is with the change of markup and you have some residual CSS that isn’t getting applied. Thanks for bringing it to our attention.

[David]

FYI spotted the issue, in the latest update they moved a CSS class which effect the removal of the margin-left. We’ll either fix or raise an issue with Gutenberg to have them apply the margin removal. Thanks again

[Daniele]

Great David!
Happy to hear that

[David]

Thanks again

[Author]

Posts