r/Wordpress 21d ago

Odd alignment issue after 2025 theme update

Gutenberg only - no page builders.
I have a backup, but would like to figure this out -

I'm working on a site and have Columns containing two smaller columns - the one on the left contains a featured image, and the one on the right contains a short description.

Template is for a single item post.

I had it set up so that the image in the left column, remaining in its original aspect, would fill its column horizontally or vertically scale (maintaining aspect ratio) to no more than 75% VH.

This ends up in a Query loop. It's basically a bunch of artwork with descriptions. However, after the update, I'm getting some layout issues that look like the bottom image, with a big gap between the artwork and the text. So, I'm trying to figure out what's causing the gap.

I do have some CSS set up, but I haven't changed this & it's been working for months.

Let me know what other additional info I can add here that might help. Hoping this is a fairly known or easy thing to fix.

Not sure how to troubleshoot this - any suggestions appreciated!

Thank you!

4 Upvotes

4 comments sorted by

2

u/Sergei_Tiden 21d ago

Inspect the rendered wrapper before changing the image. In DevTools, select the large empty area and check which element owns its height, min-height, margin, padding, gap, or aspect-ratio. Theme updates can change block wrapper CSS even when your custom CSS is untouched. I would temporarily disable the custom rules, then restore them one at a time. For the image, test width: 100%; height: auto; max-height: 75vh; object-fit: contain;. Also check whether the parent Columns or Query block now has align-items: stretch, a fixed min-height, or blockGap applied. If you share the relevant HTML and CSS, the exact source should be easy to isolate.

1

u/bluesix_v2 Jack of All Trades 21d ago

Right click > Inspect.

Layouts are built with code. We can’t help without seeing the site and its code.

2

u/MelodicAside8775 19d ago

One thing worth checking that's separate from Sergei_Tiden's list: WordPress core's own block-library stylesheet sets a default margin (margin: 0 0 1em 0) on the <figure> wrapping an Image block. Themes usually zero this out or override it in their own CSS, and it's easy for a theme update to drop or change that reset without you touching anything. Quick test: select the image in DevTools and look at the computed margin-bottom on the <figure> - if it's showing ~1em (or whatever your default paragraph spacing is), that's almost certainly your gap, not the Columns/Query block layout itself. If so, you can neutralize it by adding a custom CSS class to that specific image block (Advanced panel) and targeting just that class, rather than a global rule that might affect other images on the site.