How to align buttons horizontally?

Tagged: 

Author Posts

Martin_1 May 26, 2026 at 6:43 pm

Hi,

I am looking for a way to align the yellow buttons below the hero on this page https://www.albruna-testplatform.com/autisme-centrum/jobcoach-autisme/ to align horizontally. I know I could try Flex and go that way but that doesn’t seem to work.

I could use some assistance with this one.

Sebastian May 28, 2026 at 11:05 am

Hey Martin,

Sorry for the slow reply. I’m currently on holiday during the UK half-term.

I see the HTML markup for the buttons (see below). You should set the container element to 100% width and you might find it easy to use Miceothemer’s CSS grid controls to make the buttons horizontal. This is a bit less straight forward that usual because there are divider elements between the buttons that are probably best targeted and set to display: none so the buttons fill the grid columns in the expected way.

You can also drag the heading to fill the width of all four columns you create with MT’s CSS grid controls.


<div class=&quot;fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column&quot; style=&quot; display: grid; grid: auto / repeat(4, 1fr); &quot;><div class=&quot;fusion-text fusion-text-1&quot;><p style=&quot;text-align: center; font-size: 13px;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>CHECK OUT THESE SERVICES AS WELL</font></font></p> </div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-1 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/re-integratieplan-bij-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Reintegration for autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-2 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/burn-out-coach-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Burnout coach autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-3 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/werken-met-autisme/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Working with autism</font></font></span></a></div><div class=&quot;fusion-separator fusion-full-width-sep&quot; style=&quot;align-self: center;margin-left: auto;margin-right: auto;margin-bottom:1px;width:100%;&quot;></div><div style=&quot;text-align:center;&quot;><a class=&quot;fusion-button button-flat button-large button-default fusion-button-default button-4 fusion-button-span-yes fusion-button-default-type&quot; target=&quot;_self&quot; href=&quot;https://www.albruna-testplatform.com/autisme-centrum/autisme-op-de-werkvloer/&quot;><span class=&quot;fusion-button-text awb-button__text awb-button__text--default&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;><font dir=&quot;auto&quot; style=&quot;vertical-align: inherit;&quot;>Autism in the workplace</font></font></span></a></div></div>

Also, I see some styles that make the buttons sticky, so they overlap the text below. Might be worth removing that from whatever builder you are using.


@media screen and (min-width: 1025px) {
.awb-sticky.awb-sticky-large {
position: sticky;
top: var(–awb-sticky-offset, 0);
}
}

Finally, have you tried using the AI assistant in Microthemer to help with this? It can either advise you about things or implement changes directly. It’s not perfect, but can sometimes give you a quick answer / solution because it can inspect the page and a bit like a web developer opening up dev tools and looking at the HTML and current styles.

I hope that helps. Let me know if you’re still stuck.

Cheers,
Sebastian

Martin_1 May 28, 2026 at 1:30 pm

LOL this is the second time I get you on your holiday hahaha. What are the chances of that.

I have removed the seperators and the sticky. I also set the witdh to 100% but that makes the buttons VERY wide.

Would you still advice to use the grid option in Microthemer?

I did ask the AI assistant but it had no effect. It gave me this

/** General >> Fusion button parent **/
.fusion-builder-column-2>div:nth-of-type(1)>div:nth-of-type(2) {
display: flex;
}

/** General >> Fusion button **/
#post-45 .fusion-button {
display: flex;
}

but it didn’t change anything.

Don’t feel the need to rush in answering. I am changing all this no sooner than next week. Enjoy your holiday.

Sebastian June 1, 2026 at 7:47 pm

Hey Martin, I’m back from holiday now.

Yes I recommend trying the grid option, and like I said you will need to target the divider elements that will occupy a slot in the grid until they have been set to display: none.

One the buttons are in a grid of 4 columns they will not be so wide, so the 100% width setting should be ok (or 90%, whatever looks right).

Cheers,
Sebastian

You must login or register to reply to this topic.