Can you have buttons underneath each other instead of side by side?

[core365]

Hi, I’m working on a site and on one page I’m using quite a few buttons and instead of going under each other, they’re going side by side and I don’t know how to force it onto the line underneath it!

I’ve uploaded a screen grab for you to see.

I’ll give you the page URL in a secure note, as it’s a temporary link.

Thanks!

[nico]

Hi @core365,

Thanks for writing in.

I could see that your section below the not working section is working great. You could duplicate the working section so that it will work great already.

Hope it helps.

Let us know how it goes.

Thanks.

[core365]

Hi, I know the bottom one is working fine and if I was happy with it I’d be using it and not contacting yourselves! I’ve constructed the top one differently as I wanted more space above the purple leaf.

I’d like the buttons to be each on separate lines, but I can’t create a row specifically for each button as the row has a background image - the purple leaf. That’s why the bottom one works, as the purple leaf is the background upper layer and I’ve created a separate row for each button, but I don’t want it to work like that.

Cheers

[jade]

Hi there,

Try settings an inline CSS to the buttons display: inline-block; so that only one button will show up every line.

You can fine the inline CSS field when you click on the customize option of the button elements.

Hope this helps.

[core365]

Hi, I’ve added the CSS into the column where the buttons are, but nothing has happened, they’re still showing side by side.

Cheers

[christian]

Hey @core365,

Try adding a left margin of 20% to each of your buttons

It does not look good in tablet view though so you might want to apply some custom flex display to your row.

Hope that helps.

[core365]

Hi, ok, I’ll give it a go, thanks!

[thai]

Let us know how it goes!