[Support request] How to align buttons to the bottom of a container?

[Elvin]

I believe your aim was to make it display like this?
https://share.getcloudapp.com/d5uNEeYZ

My previous reply should do just that.

I’ve checked the grid your site has and it didn’t seem to have the necessary class for styling as instructed from my previous reply.

Can you try it out first?

[Sascha]

Hi,

I have applied 100 vw to each container, but that looks odd on retina screens, so I’d prefer to have different param, like clamp. Is it possible?

Then, on my other site, I have applied this code:

@media screen and (min-width: 1008px) {
.gb-button-wrapper {
position: absolute;
bottom: 20px;
width: 80%;
}
.gb-container{
position: relative;
}
}

but then it looks like the price overlap with the button, as you can see here 🙁 Can you help with this?

https://logoeasy.de/pricing-table-wizard-new/

[Ying]

I logged in your site, but where should I be looking at?

It’s not the same site as the link you shared on your first post?

I would say try this:
1. Remove all the CSS you added trying to align the buttons, as position: absolute is not the best way to do it.

2. Remove the min-height you set for each container, but add an additional CSS class, eg. custom-align-container.
This is where to add the class: https://wordpress.com/support/adding-additional-css-classes-to-blocks/

3. Select the Grid block, set its vertical alignment to default.

4. Try this CSS Tom provided, replace my-custom-class with custom-align-container:
https://community.generateblocks.com/t/grid-items-with-different-content-heights-aligned-bottom-block/36

[Author]

Posts