Problem creating equal columns

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

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

Author

Posts
May 5, 2020 at 2:21 pm #1271196

Joaquin

Hi Leo, i can’t make a columns like in this link: https://flexbox.ninja/demos/same-height-columns/

I need the content like text, images, buttons at same height in each column. My buttons for example are in different position because in some columns i have more text than another so the buttons are positioning higher or lower.
How can i fix it? is it possible?

May 5, 2020 at 3:25 pm #1271237

Leo
Staff
Customer Support

Hi there,

How are you adding columns currently?

I would recommend using a our block plugin GeenrateBlocks:
https://generateblocks.com/

May 5, 2020 at 6:04 pm #1271328

Joaquin

I’m using GenerateBlocks. But i don’t know how to put all the content at the same height. I mean, aligned buttons, text, etc. As you can see i have some buttons higher than others in each column.
e.g: on this page from generatepress: https://generatepress.com/premium/ can you see how each column is equal to another? each title, image, button are positioned at the same height.

May 6, 2020 at 9:20 am #1272321

Leo
Staff
Customer Support

Looks like you’ve done it?
https://www.screencast.com/t/IXRRUzzKuo

It looks good to me 🙂

May 6, 2020 at 9:55 am #1272417

Joaquin

No, this is how it looks for me: https://www.screencast.com/t/QPsN5Y2lNK8B
🙁

May 6, 2020 at 3:19 pm #1272838

Tom
Lead Developer
Lead Developer

Hi there,

Right now this would take some custom CSS. We’re looking at adding an option into the plugin.

I tried to load your site but it seems to be behind a coming soon page at the moment. If you’d like to open it up I can help with the CSS 🙂

May 6, 2020 at 4:10 pm #1272898

Joaquin

Hi Tom, thank’s for answer me.
I tried with some CSS, but i’m not an expert and what i found online didn’t help me. I’ve already turn off maintence mode. Now you can take a look 🙂

May 7, 2020 at 5:00 am #1273483
David
Staff
Customer Support
Hi there,

try adding this CSS:
```
.space-between .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
```
Then select the Grid parent and give it an Additional CSS class of space-between

This is the easiest method for equal heights – there is no automatic method to align different height titles and text.
May 7, 2020 at 6:01 am #1273553

Joaquin

It works perfect! Thank you so much guys, i appreciate your support 🙂

May 7, 2020 at 8:19 am #1273942

David
Staff
Customer Support

Glad we could be of help

May 25, 2022 at 10:43 am #2232552

Austin

Hello David – just curious if there is a better method now for equal heights?

May 25, 2022 at 10:59 am #2232562

Ying
Staff
Customer Support

Hi Austin,

It still requires CSS now.
Author

Posts