Aligning elements with the bottom of cards

Hi,

Your website is password-protected so I can’t access it, but I think I understand what you mean. Twentig doesn’t include an option to do it, but you can achieve it by adding some CSS. The example below shows how to create a cols-align-bottom class that will be applied to the columns block:

First add the following CSS in the Customizer > Additional CSS:

.wp-block-columns.cols-align-bottom  .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.cols-align-bottom .wp-block-column > * {
	margin-top: 0;
}

.wp-block-columns.cols-align-bottom  .wp-block-column > :last-child {
	margin-top: auto;
}

Then in the block editor, select your columns block, open the settings sidebar, and type cols-align-bottom in the Additional CSS Class(es) field under the Advanced panel.

I hope the above is useful to you.
Tom

Hey I’m sorry, I gave you the staging version which of course you would need a login to see.

The page is now live at https://webstore.coachingleaders.co.uk/practical-nlp-podcast-back-episodes/ so I wonder if you could take another look?

I have added the additional CSS but I wasn’t sure which columns block to apply the cols-align-bottom to – the block containing the cards, or the block within each card that has the price and the button?

Also I have an additional problem with the button positioning – when the browser window is at certain widths, the buttons overflow the edges of the cards (see screen shot:
https://i.gyazo.com/6b8a483ab5921e3fad9efee2f41cb7ea.png)

You should add the cols-align-bottom class on the parent columns block (not on the single column block), the ones which have the card shadow style. Then you need to add the custom CSS from my previous answer in the Customizer > Additional CSS (I don’t see it on your website).

The buttons overflow the edges because they don’t have enough space. What you can do is change the columns stacking. To do so, select the Columns parent block containing the buttons and the price, and inside the settings sidebar, select “Medium screens” for the Columns stacking option.

Hope that helps.

Yes it does! The cols-align-bottom thing works perfectly.

I had less luck with the Columns Stacking option – the effect kicks in at some screen widths but not others, as you can see from these 3 screen shots (Edit: columns stacking is ‘medium screen’ in the first column, and ‘default’ in the others):

https://gyazo.com/8d9e0a0377e106c0d32a7c82f5db2c05
https://gyazo.com/cf95f5277706beb40fa22c4e2dc7b871
https://gyazo.com/77886e36a9f2de6c7fc1b32ab755bcc3

So I think I’m going to abandon that and just reduce the size of text in the button to make it smaller

• This reply was modified 3 years, 9 months ago by practicaleq.
• This reply was modified 3 years, 9 months ago by practicaleq.

Glad it works. Making the button smaller is a good solution for your layout.

Have a nice day.

Yes, it turned out I was using a fixed-width 150px button! I made it flexible and that has solved the problem.

Thanks for all your help.