Equal Height for 3 Module Groups in Parent Module Group

[JJ_Anderson]

Under the "Our Values" heading on https://preview.hs-sites.com/_hcms/preview/template/multi?hs_preview_key=8VaQxbVLLGNpOCdLB2YvFg&is_b... how do I make the 3 module group columns equal height?

[dennisedson]

well this was a fun one to follow 😆

[piersg]

Happens to the best of us!

[piersg]

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

[JJ_Anderson]

*facepalm* lol that was the issue

[piersg]

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?

[JJ_Anderson]

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!

[JJ_Anderson]

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

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

[piersg]

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?

[JJ_Anderson]

@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:

[piersg · Accepted solution]

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.

[JJ_Anderson]

@piersg still no luck 😞

[piersg]

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

[JJ_Anderson]

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