[Resolved] Gallery alignment

Home Forums Support Gallery alignment

  • This topic has 12 replies, 3 voices, and was last updated 12 months ago by David.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1014920
    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

    #1015346
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #1015384
    Daniele

    Hi,
    They are shifted to the right.

    If you see it from mobile the difference is more marked

    #1015551
    David
    Staff
    Customer Support

    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;
    }
    #1015561
    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

    #1015565
    David
    Staff
    Customer Support

    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

    #1015566
    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

    #1015573
    David
    Staff
    Customer Support

    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.

    #1015574
    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!

    #1015575
    David
    Staff
    Customer Support

    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.

    #1015578
    David
    Staff
    Customer Support

    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

    #1015580
    Daniele

    Great David!
    Happy to hear that

    #1015582
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.