Using component for column in row, can't get heights to be equal

[TristanP]

Hi there!

I am trying to get the columns to be equal height in my row.

Twist is, there’s a bunch of nested loopers going on that pull in components filled with content from CPT’s.

For some reason, i can’t get these to be equal heights? Checked out the video’s and the forum already.

[prakash_s]

Hello @Tristanarkesteijn,

Thanks for writing to us.

In order to have the equal column height I would suggest you please have a look at this video to learn more about how to set the column equal height.

How to Make Equal Height Columns w/ Buttons Anchored to the Bottom in WordPress

Hope it helps
Thanks

[TristanP]

Yes i watched Josh’s video already.

But it’s not working in this case and I am wondering if it is because of the components in there?

[ruenel]

Hello Tristan,

The parent Columns have the same heights already. You can see it here:

The height that is display is coming from the component itself. You can edit your component and then in your Column element, make sure to set a minimum height of 100%.

Kindly let us know how it goes.

Hope this helps.

[TristanP]

Hi there,

When i set the minimal height of the column in the component to 100% like so (see below) it still doesn’t work. I tried setting the div inside to a min-height of 100% also, to see if that made a difference, but it doesn’t.

[christian]

Hey Tristan,

It is not possible for your setup to have the same height because you used a structural element, the Column, as your component. Structural components include the Section, Row and Column. There’s no way you can set the height of the Section so I’d recommend you redo your setup using a Div element as our component and not the Column element so that you can control the height.

Thanks.

[TristanP]

Thanks @Christian, i will give that a try!

[TristanP]

Thanks! By using a Div like you suggested and making the Div a top level element this fixed it.

[ruenel]

You are most welcome.

[TristanP]

One more question though: When the screen is mobile, why do the columns then become incredibly tall?? A single column now becomes much taller than the viewport?!

I searched the videos and forum for answers and haven’t been able to find a solution.

[tristup]

Hi Tristan,

It seems that you have set the Min Height value to 100% of the Columns in all the breakpoints. I would suggest you set it to auto for the Mobile to get rid of this problem.

To know more about responsive styling, please go through the following article.

Responsive Styling | Themeco Docs

Hope it helps.
Thanks