[Resolved] Buttons in GenerateBlocks

[siing]

I’m trying to use the buttons with GenerateBlocks. They serve their purpose on the desktop, but not on the mobile. I used a grid with 4 columns. And when I look at my cell phone, the buttons don’t give me under the text, but are one below the other, at the end of the text. I hope it’s understandable, but I’m attaching a picture just in case.

https://ibb.co/P695X9H

[David]

Hi there,

make sure the Buttons Block is inside the same Grid item block as the text it belongs with.

[siing]

Isn’t that right? I tried with an extra grid and no extra grid (picture). So that button is right behind the list. To keep all the buttons in the same line, I also tried a standalone grid.
https://ibb.co/Q94CBC6

[David]

You don’t need to add the other Grid. Just all elements stacked inside the container:

To align all the buttons to the bottom, thats a possible future Pro feature – in the meantime add this CSS:

.align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.align-bottom-button .gb-grid-column>.gb-container>.gb-inside-container>.gb-button-wrapper {
    margin-top: auto;
}

Then Select the Grid wrapper and give it an Additional CSS class of: align-bottom-button

[siing]

It works, I forgot to add this: “Then Select the Grid wrapper and give it an Additional CSS class of: align-bottom-button”. THX

[David]

You’re welcome

[Jon]

I just used this and it worked great!

I haven’t seen anything in the current version; if there is please let me know so I can use it and remove the custom CSS.

[David]

Glad to hear that.
The CSS method is the way to go for now 🙂

[Author]

Posts