Space between Buttons - top, bottom, left right

[JK2013]

I was creating page which will have a number of buttons on top and beside each other. I have tried to add
;

and nothing creates any spacing. I want to add space between each button. The webpage where I’m attempting to implement this is: https://www.garrettandwalker.com/online-legal-services/

I found this code in the forum:
#estimation_popup.wpe_bootstraped #mainPanel .genSlide .genContent .lfb_btnContainer {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}

I added it to the customizer and it didn’t work. Thank you for any and all assistance you can provide. I’m not using cornerstone, but rather inputting shortcode.

[jade]

Hello Jason,

Since you are using Classic Button elements, you can make use of the style option to add an inline style to the buttons so that you’ll have space between them.

TO do that, please add this code to the style field of each button element:

margin: 10px 11px 12px 13px;

From the code above the top margin is 10px, right is 11px, 12px is bottom margin, and left margin is 13px.

Hope this helps.

[JK2013]

Thank you for your help but I’m not using cornerstone. How can I do this without cornerstone? Thank you

[jade]

Hi Jason,

If you are using shortcodes to add the buttons, you can add the style attribute in the shortcode like:

[button style="margin: 10px 11px 12px 13px;" type="real" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]

https://demo.theme.co/integrity-1/shortcodes/buttons/

Hope this helps.

[JK2013]

Thanks Jade. I added the style attribute and it didn’t work. I cleared my cache as well just to be sure. Here is my shortcode for my entire page. The only one I changed was the first one but they’re still stacked on top of one another. I tried with margin 10 px alone as well as the way you had it typed out. Thank you for your help.

[column type=“one-third”]
[button style=“margin: 10px 11px 12px 13 px;” button type=“real” shape=“pill” size=“large” href=“https://www.garrettandwalker.com/caraccidentintake/” title=“Click here to schedule an appointment with one of our Top Rated Car Accident Lawyers”][icon type=“car”]Car Accident[/button]
[button type=“real” shape=“pill” size=“large” href=“https://www.garrettandwalker.com/criminal-case-questionnaire/” title=“Click here to schedule an appointment with one of our Top Rated Criminal Lawyers”][icon type=“gavel”]Criminal Law[/button]
[button type=“real” shape=“pill” size=“large” href=“https://www.garrettandwalker.com/family-law-intake-initial/” title=“Click here to schedule an appointment with one of our Top Rated Family Lawyers”][icon type=“home”]Family Law[/button]
[button type=“real” shape=“pill” size=“large” href=“https://www.garrettandwalker.com/traffic-ticket-intake/” title=“Click here to schedule an appointment with one of our Top Rated Ticket Lawyers”][icon type=“road”]Traffic Ticket[/button][/column]

[friech]

Hi Jason,

Where did you get that [column type="one-third"] shortcode? That is not native to the theme, we can not provide support for that.

Here’s what I advise to you, remove the margins you applied on the buttons. Use the Block Grid shortcode, but instead of adding an image to each Block Grid Item, you put your buttons to it. That should inline your buttons and will respond properly on the mobile view. Add a class center-text to the block-grid shortcode to properly center the button.

e.g

[block_grid type="four-up" class="center-text"]
	[block_grid_item][button type="real" shape="pill" size="large" href="https://www.garrettandwalker.com/caraccidentintake/" title="Click here to schedule an appointment with one of our Top Rated Car Accident Lawyers"][icon type="car"]Car Accident[/button][/block_grid_item]
	[block_grid_item][button type="real" shape="pill" size="large" href="https://www.garrettandwalker.com/criminal-case-questionnaire/" title="Click here to schedule an appointment with one of our Top Rated Criminal Lawyers"][icon type="gavel"]Criminal Law[/button][/block_grid_item]
	[block_grid_item][button type="real" shape="pill" size="large" href="https://www.garrettandwalker.com/family-law-intake-initial/" title="Click here to schedule an appointment with one of our Top Rated Family Lawyers"][icon type="home"]Family Law[/button][/block_grid_item]
	[block_grid_item][button type="real" shape="pill" size="large" href="https://www.garrettandwalker.com/traffic-ticket-intake/" title="Click here to schedule an appointment with one of our Top Rated Ticket Lawyers"][icon type="road"]Traffic Ticket[/button][/block_grid_item]
[/block_grid]

Thanks,

[JK2013]

This worked perfectly. Thank you for your help. Your team is excellent and I sincerely appreciate all of the help you continue to provide.

[friech]

We are delighted to assist you with this.

Cheers!