Archived topic
Problem creating equal columns
11 replies · Started by Joaquin on May 5, 2020
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?
Hi there,
How are you adding columns currently?
I would recommend using a our block plugin GeenrateBlocks:
https://generateblocks.com/
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.
Looks like you've done it?
https://www.screencast.com/t/IXRRUzzKuo
It looks good to me :)
No, this is how it looks for me: https://www.screencast.com/t/QPsN5Y2lNK8B
:(
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 :)
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 :)
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.
It works perfect! Thank you so much guys, i appreciate your support :)
Glad we could be of help
Hello David - just curious if there is a better method now for equal heights?
Hi Austin,
It still requires CSS now.