Need help making columns same height please!

[DHellman]

Hello! I am working on a landing page for my company using the drag and drop design tools and we have a section that has three columns next to one another with various text and images  as well as a white background within each column. We would like to figure out how to make it so that the white background of the columns are all the same height, despite the variation in amount of text within them. We've played around with changing the padding and adding in extra line spaces however this effect only works on some devices and not all. 

I have very limited coding experience so I'm hoping that someone may have some kind of code snippet they may be willing to share and instructions on where I should place it? If there is no way to do this within the drag and drop feature, Id be grateful to know what our next best option might be. Thank you!

Really appreciate your support!

[alyssamwilie · Accepted solution]

@DHellman Ah, sorry, there's a typo in my snippet is why it's not working! it should be dnd-section, not dnd-secton.

<style>
  .dnd-section > .row-fluid {
    display: flex;
    flex-wrap: wrap;
  }
</style>

[DHellman]

Wow, I think it worked! You are amazing, thank you so much!!

[alyssamwilie]

I'm not seeing the new style on the page, did you publish the change?

In the child theme it'd be the same snippet just without the <style> tags as you would put it directly into the child theme's .css file.

.dnd-section > .row-fluid {
  display: flex;
  flex-wrap: wrap;
}

[DHellman]

Thank you Alyssa. I pasted the code snippet as you've instructed however there is no change to the column height. 

I'll look into creating a child theme using the steps detailed in the article you provided - thank you! Once I've accomplished this, would there be a different code snippet that I would want to use to solve this issue?

[alyssamwilie]

@DHellman Hm, it's a HubSpot theme so not sure why it's missing that functionality. HubSpot theme files aren't directly editable and not sure if you'd be interested in creating a Child Theme since you'd have to switch templates. But a quick solution would be:

1. In the Page Editor open the Settings tab

2. Scroll down and click to open Advanced Options

3. Paste the following into the Head HTML box

<style>
  .dnd-section > .row-fluid {
    display: flex;
    flex-wrap: wrap;
  }
</style>

[DHellman]

Hi Alyssa, thanks for your help! Here is the link to the site https://info.syapse.com/experts-in-oncology

It may currently appear as if the white backgrounds for the columns are the same height, but thats just because I added in some extra line breaks to the text boxes to make them equal. However this is just a short term solution as this doesn't work for all devices. Would appreciate any intell you could provide!

[alyssamwilie]

HubSpot already has DnD set up to automatically make columns next to each other stretch to the same height. The only reason I can think for it to be not doing this for you is that the theme/template you're using has overwritten that. Do you have a link to the page I could view so I can take a look at the html/css?