# Issue with equal height columns + vertical align

**URL:** <https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879>\
**Category:** Beaver Builder\
**Created:** [March 25, 2016, 4:19am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879 "2016-03-25T04:19:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincent-le](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/v/58f4c7/32.png) [@vincent-le](https://community.wpbeaverbuilder.com/u/vincent-le)\
**Post date:** [March 25, 2016, 4:19am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/1 "2016-03-25T04:19:45Z")

</div>

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](https://dl.dropboxusercontent.com/u/26868657/Capture%20d%E2%80%99%C3%A9cran%202016-03-25%20%C3%A0%2012.12.47.png)

![page2](https://dl.dropboxusercontent.com/u/26868657/Capture%20d%E2%80%99%C3%A9cran%202016-03-25%20%C3%A0%2012.12.53.png)

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](http://forum.wpbeaverbuilder.com/support/q/how-to-center-a-video-text-module-vertically-in-a-column/#post-62150).

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

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [March 25, 2016, 10:37am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/2 "2016-03-25T10:37:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vincent-le](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/v/58f4c7/32.png) [@vincent-le](https://community.wpbeaverbuilder.com/u/vincent-le)\
**Post date:** [March 25, 2016, 10:43am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/3 "2016-03-25T10:43:22Z")

</div>

OK for the height.

For v-align, you can see the header row [of this page](http://26bcfbde44.url-de-test.ws/fr/home/).

---

<div class="post-metadata">

**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\
**Post date:** [March 25, 2016, 2:55pm UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/4 "2016-03-25T14:55:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vincent-le](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/v/58f4c7/32.png) [@vincent-le](https://community.wpbeaverbuilder.com/u/vincent-le)\
**Post date:** [March 26, 2016, 2:59am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/5 "2016-03-26T02:59:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\
**Post date:** [March 28, 2016, 8:10am UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/6 "2016-03-28T08:10:37Z")

</div>

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](https://imgur.com/huoV4KR)

Ben

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:23pm UTC](https://community.wpbeaverbuilder.com/t/issue-with-equal-height-columns-vertical-align/7879/7 "2019-04-27T22:23:25Z")

</div>


