# Need help making columns same height please!

**URL:** <https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968>\
**Category:** CMS Development\
**Created:** [October 26, 2022, 8:36pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968 "2022-10-26T20:36:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DHellman](https://avatars.discourse-cdn.com/v4/letter/d/cc9497/32.png) [@DHellman](https://community.hubspot.com/u/DHellman)\
**Post date:** [October 26, 2022, 8:36pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/1 "2022-10-26T20:36:15Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [October 27, 2022, 12:43am UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/2 "2022-10-27T00:43:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![DHellman](https://avatars.discourse-cdn.com/v4/letter/d/cc9497/32.png) [@DHellman](https://community.hubspot.com/u/DHellman)\
**Post date:** [October 27, 2022, 4:06pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/3 "2022-10-27T16:06:14Z")

</div>

Hi Alyssa, thanks for your help! Here is the link to the site [syapse.com - Website Moved](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!

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [October 27, 2022, 4:18pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/4 "2022-10-27T16:18:22Z")

</div>

@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](https://knowledge.hubspot.com/website-pages/use-themes#create-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

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

```

---

<div class="post-metadata">

**Author:** ![DHellman](https://avatars.discourse-cdn.com/v4/letter/d/cc9497/32.png) [@DHellman](https://community.hubspot.com/u/DHellman)\
**Post date:** [October 27, 2022, 6:37pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/5 "2022-10-27T18:37:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [October 27, 2022, 6:41pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/6 "2022-10-27T18:41:35Z")

</div>

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.

```lia-code-sample
.dnd-section > .row-fluid {
 display: flex;
 flex-wrap: wrap;
}

```

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [October 27, 2022, 6:44pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/7 "2022-10-27T18:44:23Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![DHellman](https://avatars.discourse-cdn.com/v4/letter/d/cc9497/32.png) [@DHellman](https://community.hubspot.com/u/DHellman)\
**Post date:** [October 27, 2022, 6:49pm UTC](https://community.hubspot.com/t/need-help-making-columns-same-height-please/67968/8 "2022-10-27T18:49:07Z")

</div>

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