Button Group / Space between buttons / Any idea?

Fuellemann · March 23, 2018, 7:43pm

Hi fellow designers. I am using the button group but I need to add some space between the buttons. Is there a CSS I could use to achieve this?

Thank you,

Jan

elixirgraphics · March 23, 2018, 7:44pm

I would suggest not using a Button Group stack then. The Button Group is specifically meant to join the buttons.

Fuellemann · March 23, 2018, 7:48pm

If I using columns then the buttons are either too close or too far apart (as they have different lengths). Hmm - any idea?

I need some space between those…

elixirgraphics · March 23, 2018, 7:53pm

Use Button stacks with the Block feature turned on inside of Columns.

mitchellm · March 24, 2018, 4:46am

Is there a way to control/set the spacing between the buttons? I’m guessing the spacing is something like 40 to 60 px. I realize there may be no way to control the spacing, but wanted to make sure.

elixirgraphics · March 25, 2018, 11:49am

Are you referring to changing the gutters for the Columns stack? If so, not that is not a feature of the stack. The Columns stack uses the built-in Bootstrap gutters currently. You could disable the gutters for the Columns stack though and then wrap the buttons in individual Margins stacks and set whatever spacing you want at each breakpoint.

mitchellm · March 26, 2018, 4:15am

Got it. Great suggestion: I had not thought of that.

GavinH · August 15, 2022, 12:54pm

Hi, in desktop buttons (in columns) look great. On mobile they cover each other (and my banner gets hidden as well). Would appreciate some insight on this.

elixirgraphics · August 15, 2022, 1:09pm

Likely due to your settings for the Banner height. Be sure to have a look and assess whether or not you’ve given your Banner content enough height to contain your content. If you feel everything is correctly setup, feel free to post a live URL and a copy of your project file for us to look at.

Provide us a copy of your project file please, along with a link to the live site.

Create a ZIP file containing your project file. This is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.

As an aside, it is probably best not to reply to 4 year old posts, and instead create a new one for your specific problem.