Issue with equal height columns + vertical align

Hi,

I don’t get the equal height column feature.

1/ I have a 3 columns row
2/ I set ‘equal height’ to yes

but the heights are not the same :
page1

page2

What is going on?

Then, how to align all the tree columns vertically centered?

I’ve tried to declare a custom CSS class and set it to ‘align-items: center;’ as in here.

But nothing happened (class selector is OK, I can change the text color).

Hey Vincent,

What that open does is it matches the height of the column, not the module. On the screenshot above, you won’t be able to tell the left column from the right column. Try placing a background color for each and you’ll notice they both have equal heights.

Re center aligning the items vertically, what browser are you using? I just realized the code I gave there only works for a few. Also, can you share the URL of the page you’re working on so we can check?

Ben

OK for the height.

For v-align, you can see the header row of this page.

Hi Vincent,

Are you referring to the Menu module with the menu items Products, About and News?

If so, you appear to have added padding to the column. If you open the Column settings and navigate to the Advanced tab. You should be able to set the padding top to 0. Which will resolve the alignment issue.

Thanks,
Danny

I got the padding thing, but still, my modules aren’t v-aligned within the row.

Hey Vincent,

I just checked the page and it looks fine on my end. Check the screenshot below for reference.

View post on imgur.com

Ben