Adjusting width of multiple columns

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. :face_with_tongue:
And I hope the answer is not, javascript > css :disappointed_face:

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.

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.

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

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

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

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.

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?

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