[Resolved] Button alignment to bottom

[Wolfgang]

Dear GP team,

first of all Happy New Year and thanks for an amazing theme – I migrated my page to GP today and never did a migration go so smooth before! I am only struggling with one point. I would like to make the buttons of my article cards align to the bottom of the card. I tried to follow these instructions: https://generatepress.com/forums/topic/gb-button-bottom-alignment/. However, I cannot seem to manage to target the right block in my code to make the auto margin for the button wrapper work. Hence, any support would be greatly appreciated!

Thanks and all best, Wolfgang

[Fernando]

Hi Wolfgang,

The CSS code varies depending on the structure of your Grid.

There will be an upcoming update for GenerateBlocks that should ideally allow you to do this with no extra code needed. The alpha release comes out within a week.

For now, the CSS code would be something like this:

.gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container, .gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
}

.gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > *:last-child {
    flex-grow: 1;
}

.gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.gb-grid-wrapper-77d0f4d7.gb-query-loop-wrapper > .gb-grid-column > .gb-container > .gb-inside-container > .gb-container > .gb-inside-container > *:last-child{
    margin-top: auto;
}

You can replace this gb-grid-wrapper-77d0f4d7 class with a custom CSS class for your Grid Block so you can re-use the code.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Wolfgang]

Hi Fernando,

Thanks heaps for the super quick solution – works like a charm! I replaced the class with a custom one and got it to work for my entire site.

Also glad to hear about the upcoming update for GenerateBlocks and already looking forward to trying it out! Until then your suggestion above is the perfect interim solution. 🙂

Thanks again,
Wolfgang

[Fernando]

You’re welcome, Wolfgang! 🙂

[Author]

Posts