Site logo

Archived topic

Problem creating equal columns

11 replies · Started by Joaquin on May 5, 2020

Viewing posts 1–12 of 12

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?

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.

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.

This archived topic is closed to new replies.