[Resolved] How to make query loop grid a consistent size

[Rachel]

Hi there,

I have started replacing my wpshowpost lists with generatepress / blocks. I have worked out how to create a query loop, but am having trouble making the containers the same size.

I am going through and making sure my featured images are the same size as that obviously impacts it, but the posts also have different title lengths and excerpt lengths.

Is there a way to make all posts in a grid the same height?

Thanks
Rachel

[Fernando]

Hi Rachel,

Image sizes are easy to control. If using a GB Image Block, you’ll be able to control the image dimensions.

The problem is dealing with titles as they have different lengths.

You can probably try choosing a font-size small enough for your layout so that titles don’t wrap given that the titles you’ll be setting will be approximately be the same.

You could also place the titles/texts inside a Container Block which has a height attribute so that they would likely be the same height.

[Rachel]

So there is no way to control the size of the box overall? Post title length will vary, but if, for example, I can limit the title characters (like you can for the excerpt), then I can limit the shift down the page.

Also, with the image size, if I specify the size in the GB Image BLock, will it still be responsive and adjust the image size as required based on the device?

Thanks.

[Fernando]

If for instance you set a height, and leave the width blank, it should adjust depending on the screen size.

Yes, your approach to limit the length of the title through code, and limit the excerpt as well from the settings is a good approach.

There are also ways to control the box size. For one, you can set a max-height, and let everything that overflows go hidden. Another way is to make a container scrollable.

[Rachel]

Could you let me knowo how to set a max height on the boxes in a grid? I think that would be the best solution.
Thanks,
Rachel

[Fernando]

I noticed you have a 3 column grid now. Are you referring to the items in a row having the same height? You can try adding class my-query-grid to the class list of the Grid Block within the Query Loop Block, and add this CSS:

.gb-query-loop-wrapper.my-query-grid > .gb-grid-column.gb-query-loop-item > .gb-container > .gb-inside-container {
    height: 100%;
}

Then, set the background color to the Container Block holding everything.

This should make items in a row the same height.

If you’re wanting to set a max-height, use this instead:

.gb-query-loop-wrapper.my-query-grid > .gb-grid-column.gb-query-loop-item > .gb-container > .gb-inside-container {
   max-height: 500px;
    overflow:scroll;
}

[Rachel]

Thanks – the first option tidies it up. The text isn’t aligned, but it is better than before! – Thanks for your help.

[Fernando]

You’re welcome Rachel!

[Author]

Posts