Archived topic
Buttons in GenerateBlocks
7 replies · Started by siing on June 4, 2020
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.
Hi there,
make sure the Buttons Block is inside the same Grid item block as the text it belongs with.
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
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
It works, I forgot to add this: "Then Select the Grid wrapper and give it an Additional CSS class of: align-bottom-button". THX
You're welcome
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.
Glad to hear that.
The CSS method is the way to go for now :)
