[Resolved] Buttons Alignment

[Sasa]

Hi, I am unable to align the buttons to the center on all my pages. This issue particularly stands out on mobile view.

I have left a link to my site in the private box below.

Thank you for your assistance.

[David]

Hi there,

the structure of those buttons are really complicated.
There should be no need to add Container Block -> Grid Block -> Buttons Block.

Are you able to edit them ? As it would be best to replace them with just the GB Button with a GB Buttons container.
let me know

[Sasa]

Hi David!
Can you take a look? I’m not sure how to put space between two buttons.

[Sasa]

I have left logins below. Will appreciate if you can take a look.

[David]

Create a draft page, from the 3 dot menu in top bar, select the Code Editor and paste this into the editor:

<!-- wp:generateblocks/container {"uniqueId":"4b97e491","isDynamic":true,"blockVersion":3,"variantRole":"button-container","display":"flex","flexDirectionMobile":"column","alignItemsMobile":"center","justifyContent":"space-around","columnGap":"10px","rowGapMobile":"10px"} -->
<!-- wp:generateblocks/button {"uniqueId":"7fb46abe","hasUrl":false,"blockVersion":3,"display":"inline-flex","paddingTop":"10","paddingRight":"15","paddingBottom":"10","paddingLeft":"15","borderRadiusTopRight":"6","borderRadiusBottomRight":"6","borderRadiusBottomLeft":"6","borderRadiusTopLeft":"6","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-7fb46abe gb-button-text">Check price on Chewy</span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/button {"uniqueId":"8bdf089a","hasUrl":false,"blockVersion":3,"display":"inline-flex","paddingTop":"10","paddingRight":"15","paddingBottom":"10","paddingLeft":"15","borderRadiusTopRight":"6","borderRadiusBottomRight":"6","borderRadiusBottomLeft":"6","borderRadiusTopLeft":"6","backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-8bdf089a gb-button-text">Check price on Amazon</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/container -->

Then return to the Visual Editor.

To create the same layout:

1. Add a GB Button block, set its padding, border radius etc.
1.1 From the Button Blocks Toolbar select the Add to Button Container.

You will now have 1 x button inside the Button Container.

2. With the Button Container selected:
2.1 Layout > Justify Content -> select space-around ( the last icon on the right )
2.2 Set the Column Gap and Row Gap set to 10px
2.3 Switch to Mobile preview
2.3.1 Layout > Flex direction -> set to Column
2.3.2 Set the Align Items to Center.

Stop here if its just a single button you want.

3. From the Button Container Block Toolbar click the Duplicate button, to add another button.

[Sasa]

Thank you David! I’ll try out and let you know the result.

[David]

Let me know 🙂

[Sasa]

It’s working perfectly fine but when I try to decrease font size then the text is not centered.

[Ying]

Hi Sasa,

As the topic is marked as resolved, all the info you entered in the private info field has been erased.

Can you link us to your site again and point us to the buttons with issue?

[Author]

Posts