[Resolved] Equal height columns

[Chris]

I’m entering products in a column block and would like the columns all the same height.

Because the amount of text is different for each product the price and shortcode button at the bottom are not aligned.

I’ve looked for ages and found some CSS below but it doesn’t seem to have any effect.

This problem has been lingering for ages for me and stopping me doing loads that I would like, could you help?

/* flex-align */
.flex-align .wp-block-column{
display: flex;
flex-direction: column;
height: 100%;
}

.flex-align .wp-block-column>*:first-child {
margin-bottom: auto;
}

[Leo]

Hi there,

I would recommend using the Grid blocks from GenerateBlocks to create columns:
https://docs.generateblocks.com/article/grid-overview/
https://wordpress.org/support/plugin/generateblocks/

It allows you far better control than the core columns block from Gutenberg.

Let me know if this helps 🙂

[Chris]

I like it Leo, GenerateBlocks, how will I put shadows (exactly the same as above) around all of the containers that hold my blocks, in CSS? Would be good to be able to do this in Plugin Settings.

[Leo]

Shadows will likely be a setting with the pro version of GB.

You can add a custom CSS like box-shadow to the grid container, then target it with CSS like this:

.box-shadow {
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
}

[Chris]

So I’m using GenerateBlocks and the blocks are the same height but again, the items in each block, pushing to the top, leave a gap under some of the buttons.

Can I set the height of the paragraph item I have so that the price and button are at the same level?

Can you give me name of the block so that I can reference it in my shadow css please?

Cheers

ps – on this page – https://mclarenskitchen.co.uk/mclarens-kitchen-shop/

[Chris]

Sorted it, dug deep, improvised and oh, nicked one of David’s snippets. Lovely.

Thanks

[Leo]

Glad to hear 🙂

[Author]

Posts