Equal Height for 3 Module Groups in Parent Module Group

Develop, Build & Integrate CMS Development
1

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, how do I make the 3 module group columns equal height?

34911i28B4B0CFD7DA3DD6.png
34911i28B4B0CFD7DA3DD6.png999×283 32.6 KB

2

Hi @JJ_Anderson, 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.

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

34924i583606FE2E7E41E0.jpg
34924i583606FE2E7E41E0.jpg999×426 119 KB

3

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

34932iBD840A18B1622CAF.png
34932iBD840A18B1622CAF.png307×261 29.7 KB

34931iD037732107A4B9FD.png
34931iD037732107A4B9FD.png998×292 39.3 KB

4

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.

5

@piersg still no luck :disappointed_face:

34947i27059400AFBDE603.png
34947i27059400AFBDE603.png436×152 23.8 KB

6

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?

7

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

34948i87DB930E9A53CE39.png
34948i87DB930E9A53CE39.png312×179 14.2 KB

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

34949i492EF81E361A4337.png
34949i492EF81E361A4337.png446×259 37.2 KB

8

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
34950iE65A7AC2CA2DF387.png999×359 20.5 KB

9

@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
34951iA39D6564941CEA7A.png999×671 148 KB

10

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!

11

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

 @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;
 }
}
12

*facepalm* lol that was the issue

13

Happens to the best of us!

14

well this was a fun one to follow :laughing: