Button alignment to bottom

This topic has 3 replies, 2 voices, and was last updated 3 years, 3 months ago by Fernando.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 1, 2023 at 12:17 pm #2479964

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

January 1, 2023 at 8:29 pm #2480131
Fernando
Customer Support
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

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

January 2, 2023 at 5:03 pm #2481313

Fernando
Customer Support

You’re welcome, Wolfgang! 🙂
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

[Resolved] Button alignment to bottom

Popular Articles

[Resolved] Button alignment to bottom

Popular Articles

Start building better websites today.