# Adjusting width of multiple columns

**URL:** <https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083>\
**Category:** Blog, Website & Page Publishing\
**Tags:** starter\
**Created:** [May 26, 2023, 8:45am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083 "2023-05-26T08:45:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tom-melle](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@tom-melle](https://community.hubspot.com/u/tom-melle)\
**Post date:** [May 26, 2023, 8:45am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/1 "2023-05-26T08:45:56Z")

</div>

I’m using the Generator template. And when I set more than 1 column, the width is adjustable only by dragging the line between 2 columns. But this seems to be fixed set of widths.

Is there any way I can play around with the actual column width percentages? I’m having some button font sizing issues but our designers does not like large white spaces between buttons. 😛  
And I hope the answer is not, javascript \> css 😞

 ![tommelle_0-1685090706566.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/3/a382b454d4c1a52de2adc65f9fff8ef1019ec52f.png)

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [May 26, 2023, 10:18am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/2 "2023-05-26T10:18:00Z")

</div>

Hey @tom-melle you can adjust the white space in between them via the padding/margin options in your styling options if these are available for your module. If you click on your module then click the “style” tab on the left panel you should see options for margin and padding, setting these to 0 should minimise the whitespace, however it is possible there’s padding, margins and max-widths applied via the stylesheet, if this is the case then you would need to edit the template css to remove this!  
You should also check the “block” these modules are in. These can usually be found by hovering on the area outside of the actual button modules, you should see a fullwidth section highlighted, clicking this brings up the options for the block on the left, in the style tab here there is generally a “full width” option in the styling.

---

<div class="post-metadata">

**Author:** ![tom-melle](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@tom-melle](https://community.hubspot.com/u/tom-melle)\
**Post date:** [May 30, 2023, 8:30am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/3 "2023-05-30T08:30:09Z")

</div>

This unfortenaly doesn’t help with my problem. A fixed width is applied between the columns and the editor only allows fixed preset column width sizes to be applied by dragging the line between columns.

I’m guess that’s either the template or the editor. The option to manipulates these presets, is nowhere to be found. And I’m no fan of editing the template for this, as this might affect other columns I have set up on other pages.  
If you perhaps know of a way to align 4 buttons horizontally next to each other without the use of columns, that would also resolve my problem. But these are now simply placed underneath each other.

---

<div class="post-metadata">

**Author:** ![tom-melle](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@tom-melle](https://community.hubspot.com/u/tom-melle)\
**Post date:** [May 30, 2023, 8:38am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/4 "2023-05-30T08:38:29Z")

</div>

I also checked your suggestion with padding/margin, but that option is disabled:

 ![tommelle_1-1685435866683.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/5/f5a5c709c0ee9cf3b385d1f5fda3ae61715955ad.jpeg)

I managed to manipulate the css to apply a dirty hack by adding a negative margin on the third column.

 ![tommelle_0-1685435842569.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/f/4f5991df5b73465b78e89c3d62faa813ad7fd17f.png)

Works for now, but would like to find a proper way to resolve this.

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [May 30, 2023, 11:19am UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/5 "2023-05-30T11:19:05Z")

</div>

Hey @tom-melle it is confusing UI but I find that modules tend to have a “phantom” margin/padding by default, it’s not actually disabled. If you put “0” into each of those boxes for padding and margin it should actually push the 0 through to override the defaults already set.

---

<div class="post-metadata">

**Author:** ![tom-melle](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@tom-melle](https://community.hubspot.com/u/tom-melle)\
**Post date:** [May 30, 2023, 12:07pm UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/6 "2023-05-30T12:07:44Z")

</div>

![Schermafbeelding 2023-05-30 om 14.06.12.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/6/96c5eae12d77f863aef230bb2e0433eb8e8a803d.jpeg)

Yeah that part I figured out already. Only problem is the margin section, which specifically states these values can only be changed in develeopment tools?

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [May 30, 2023, 3:07pm UTC](https://community.hubspot.com/t/adjusting-width-of-multiple-columns/82083/7 "2023-05-30T15:07:51Z")

</div>

Oh, that’s strange! That means it’s being set in your css stylesheet then!
