Archived topic

Button alignment to bottom

3 replies · Started by Wolfgang on January 1, 2023

Viewing posts 1–4 of 4

January 1, 2023 at 12:17 pm #2479964

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

January 1, 2023 at 8:29 pm #2480131

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/

January 2, 2023 at 1:00 pm #2481170

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

January 2, 2023 at 5:03 pm #2481313

You're welcome, Wolfgang! :)

This archived topic is closed to new replies.

Start building better websites today.