[Resolved] vertical align button to bottom

[Jeroen]

Hi,
I’m trying the following in generatepress / generateblocks, to have a grid of two columns, each with a paragraph and a button below. Is it possible somehow to vertical align the buttons to the bottom of the grid? So they appear at the same absolute height?
Jeroen

[Leo]

Hi there,

No built-in option for this yet but we could likely do that with some CSS.

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Jeroen]

Hi Leo, thank you for taking a look 🙂
At the bottom of the homepage, the black buttons should be (bottom) aligned. I could set them in a new container / grid below the paragraphs for desktop, but then it would not go well on tablet / mobile. Maybe it’s not difficult but I can’t come up with the proper solution.
Jeroen

[Elvin]

Hi,

You can try this CSS:

.gb-container-dc9bea3e .gb-inside-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
}
.gb-button-wrapper.gb-button-wrapper-a75ddd8d {
    margin-top: auto;
}

Applying this would have this result: https://share.getcloudapp.com/Koulml9K

[Jeroen]

Hi Elvin
Thank you, that worked!
Auto margin on a flex child, useful 🙂

[Elvin]

Hi Elvin
Thank you, that worked!
Auto margin on a flex child, useful 🙂

Yes it definitely is.:)

No problem. Glad it works for you. 😀

[Author]

Posts