# Equal Height for 3 Module Groups in Parent Module Group

**URL:** <https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658>\
**Category:** CMS Development\
**Created:** [December 2, 2020, 12:36pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658 "2020-12-02T12:36:45Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 12:36pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/1 "2020-12-02T12:36:45Z")

</div>

Under the “Our Values” heading on [https://preview.hs-sites.com/\_hcms/preview/template/multi?hs\_preview\_key=8VaQxbVLLGNpOCdLB2YvFg&is\_buffered\_template\_layout=true&portalId=4545476&tc\_deviceCategory=undefined&template\_layout\_id=37450595480&updated=1606912446943,](https://preview.hs-sites.com/_hcms/preview/template/multi?hs_preview_key=8VaQxbVLLGNpOCdLB2YvFg&is_buffered_template_layout=true&portalId=4545476&tc_deviceCategory=undefined&template_layout_id=37450595480&updated=1606912446943,) how do I make the 3 module group columns equal height?

 ![34911i28B4B0CFD7DA3DD6.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/f/f25d0ee7d88a8d4c89e4351a67c0f33cfccaac08.png)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 4:38pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/2 "2020-12-02T16:38:03Z")

</div>

Hi [@JJ\_Anderson](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67520), add display: flex to the wrapping module group (the one that contains all three).

I would add it as a CSS class in the styling options, because you need to add a media query to make the flex-direction a column for 768px and lower, otherwise they won’t stack on tablet/mobile.

```lia-code-sample
.myClass {
 display: flex;
}
@media (max-width: 768px) {
 .myClass {
 flex-direction: column;
 }
}

```

 ![34924i583606FE2E7E41E0.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/5/b56a65158593e4df52df2972a7038c71548e878a.jpeg)

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 5:08pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/3 "2020-12-02T17:08:24Z")

</div>

@piersg Thanks! I added the class and CSS but the preview doesn’t seem to be updating?

 ![34932iBD840A18B1622CAF.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/d/dd235fa2f74663e72965ea148d513ca406e4ef9c.png)

 ![34931iD037732107A4B9FD.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/58ed213b0213c86a04dfbf01a7dcdb783d5a6f8c.png)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 8:20pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/4 "2020-12-02T20:20:01Z")

</div>

Looks like that isn’t applying to the right wrapping div because HubL adds a bunch of extra divs on the sly. If you change “.equal-column-height” for “.equal-column-height \> .row-fluid-wrapper \> .row-fluid” that should work.

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 8:31pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/5 "2020-12-02T20:31:15Z")

</div>

@piersg still no luck 😞

 ![34947i27059400AFBDE603.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/6/f60b7f1cf26b2fb4505a7e199edcc6b3f0184e61.png)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 8:35pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/6 "2020-12-02T20:35:28Z")

</div>

The CSS stylings aren’t being applied to the page. The mobile-padding rule isn’t being applied either. How and where are these styles being added?

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 8:38pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/7 "2020-12-02T20:38:48Z")

</div>

@piersg I added them here in the actual page template:

 ![34948i87DB930E9A53CE39.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/1/110513adc7d05bff31c9f990806ebb49a9c386bc.png)

Strange, because the first CSS command is being applied. Not sure why the other 2 wouldn’t be?

 ![34949i492EF81E361A4337.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/e/6ea03d8dd650aae210a495477dc3b8ba33955add.png)

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 8:45pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/8 "2020-12-02T20:45:36Z")

</div>

The first rule, mobile-padding, isn’t being applied. The padding for those elements is 50px all the way around. I think you need to add them in the head. If you copy-paste that style block into the head html area in advanced settings of the page, does it work?

 ![34950iE65A7AC2CA2DF387.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/a5450ee75b82267aff0cfdafa32ecf55c07dedce.png)

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 8:52pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/9 "2020-12-02T20:52:58Z")

</div>

@piersg I moved the code there instead, but still no luck. For what it’s worth, the top bit of CSS code actually was working on the mobile preview even when I had it in the other box, see:

 ![34951iA39D6564941CEA7A.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/8/985654a2a744012ed2f9a7f74e63846f0aaa65e5.png)

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 8:56pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/10 "2020-12-02T20:56:13Z")

</div>

But strangely, adding the CSS to our primary stylesheet worked. No idea why it wouldn’t take on the page template though. Anyhow, thank you for the help!

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 9:03pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/11 "2020-12-02T21:03:08Z")

</div>

No worries. I actually just noticed something, your media query for mobile-padding isn’t closed, so it’s containing the CSS rule you want for columns, making it invalid

```lia-code-sample
 @media screen and (max-width: 767px) {
 .mobile-padding {
 padding: 25px !important;
 }
 } <----- you need this closing bracket
 .equal-column-height > .row-fluid-wrapper > .row-fluid {
 display: flex;
 }
@media (max-width: 768px) {
 .equal-column-height > .row-fluid-wrapper > .row-fluid {
 flex-direction: column;
 }
}

```

---

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [December 2, 2020, 9:15pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/12 "2020-12-02T21:15:07Z")

</div>

\*facepalm\* lol that was the issue

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [December 2, 2020, 9:37pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/13 "2020-12-02T21:37:32Z")

</div>

Happens to the best of us!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [December 3, 2020, 3:20pm UTC](https://community.hubspot.com/t/equal-height-for-3-module-groups-in-parent-module-group/28658/14 "2020-12-03T15:20:37Z")

</div>

well this was a fun one to follow 😆