Equal column height

[Larsc]

Hi,

In my design i have 4 columns in a row, with each a different height. I want to make the columns equal in height.

I found that is is possible with bootstrap ( .row-eq-height ), but these functions seems to be stripped out in the HubSpot version?

Is there another way to achieve this?

Thanks!

Lars Claus

[stefen · Accepted solution]

Use flexbox on the .row-fluid div. So for example, add a class "equal-heights" to the row and then the styles would look like:

.equal-heights > .row-fluid-wrapper > .row-fluid {
  display: flex;
  flex-wrap: wrap;
}

that should give you equal heights and the flex-wrap allows the COS grid to wrap on mobile as usual.

[FORCINGMETO]

Doesn't work, are you able to show screenshots of this working?

I added your CSS and built a template that looks like

[newbie12]

Put equal-heights for the wrapper whose children need to have the same height.

The output:

[fkistner]

Can I reopen/derail this thread? I have a similar issue and the solutions above worked, except that the children that I need to be equal height are module groups, and I would really like the bottom module of each of them to stay at the bottom. Using the .equal-heights class on the container group worked to make the child groups equal heights, and looks totally good except that the module at the bottom just attaches to the bottom of the module above it, leaving white space below it in the shorter groups in order to match the height of the longer ones. I tried making the position of the bottom module absolute and tying it to the bottom of the group, but that made it weirdly overlap the module above it.

[JohnnyB]

@fkistner- A few months old, you've probably solved it by now, however there is another way to target. Instead of using > which requires an exact order of classes, try doing this instead:

.equal-heights .row-fluid-wrapper .row-fluid {
  display: flex;
  flex-wrap: wrap;
}

It's much less strict and worked for me whereas the other did not. I'm using a two column Flex Container, where one has a module group and the other simply has a css class with a background image.