Query Loop layout

Hi there,

It’s because the text container on the right wants to match the height of the image on the left.

So do you want to reduce the image height if the text container is shorter?

Hi there,

Here’s what’s actually causing it. Your loop item is a two-column grid, and the image is a direct grid item. An image carries its own intrinsic height, so in that column it’s about 257px tall, and that’s what sets the row height. The text column then stretches to match, and since the meta row sits at the bottom, the leftover space shows as the gap.

Worth noting it goes the other way too — on your card with the two-line title, the text is slightly taller than 257px, so that card is a bit taller than the first one. The cards aren’t equal height today either way.

The thing to know is that setting height: 100% or object-fit: cover on the image alone won’t fix this. The row is sized by the image, so stretching the image to fill that row just gives it back its own height. To let the text decide the height, the image has to stop contributing height at all, which means wrapping it.

The fix

Inside your loop item, wrap the image in a Container block, so the structure becomes loop item → Container → Image.

On the Container (the wrapper), set:

• Position: relative
• Overflow: hidden

On the Image inside it, set:

• Position: absolute
• Top, right, bottom and left: 0
• Width: 100%
• Height: 100%
• Object fit: cover

The wrapper has no height of its own, so the row now collapses to whatever the text needs, the wrapper stretches to fill it, and the image covers that area. One-line and two-line titles both give you a clean card with no gap, and the image scales to match either way.

Hello,

The mobile issue is a side effect of how the fix works, and it’s an easy one to patch.

The container wrapper deliberately has no height of its own — it takes its height from the text column sitting next to it. On mobile your card stacks into a single column, so there’s nothing beside the wrapper to give it a height, it collapses to zero, and the image disappears with it.

The fix is to give the wrapper its own height on mobile only, using an aspect ratio:

aspect-ratio: 3 / 2;