Button on the product highlight block won’t center

Hello,
Same problem here. I’ve got highlight categories block on the site, and the button flows to the left.
I have checked all the settings, CSS, all seems like all right, but the button still not centered.
One month ago it was all right. I hoped getting the newest version of the template it will be OK, but nothing happend.
On the admin side, as I edit the page the blocks showing all right. On the live page they look weird.
Site is: popartbox.hu

Thanks for your help in advance.

Thanks for expanding on this! Seeing you have the same problem and it only happened a short while ago makes me think it might be a bug with Storefront/Wordpress. Let’s hope it gets solved quickly. Awesome looking website and products by the way! Very inspiring! ??

I had a buddy over that fixed it for me adding this to CSS:

.wp-block-button__link{
left: calc(50% – 68px);
position: relative;
}

Might have to adjust the px amount to what suits your website.

Thank you for sharing this.
I used left-margin: 2em;

So we both tweaked a little.

But it would be the best if the authors of the theme would check it.
I hope they will do it soon.

Hey @stanvb and @kovka01 !

Could you confirm the WooCommerce and block versions that you are using? I would also like to confirm that you are referring to the Featured Product block.

I have tried this on my test site and I wasn’t able to reproduce it, I got the button centered.

Keep me posted!

Cheers

Hello @danielinhou ,

Thank you for your answer. All is the freshest version.
WordPress: 7.1
Storefront: 3.5.1
WooCommerce: 5.2.1

I use the Featured Categories block. (Hope this is the ‘official’ name, I have got a translated version.)

This is how I use it:
I put Colums block, take 3 columns, and in the colums I use the Featured Categories.
On an other site I tried it, and as I changed the width of the Columns block (full width or broad) the buttons started to float left. All in css is seems right (.aligncenter ), but still it floats left.
On this site I tried to change the width of the Coumns block as well, but it hasn’t made any difference. ?? Unfortunatelly.
It seems like some conflict should be with the WordPress blocks and the Storefront blocks. But I can’t find it.

Thanks for any help.

Hi there,

OK, I have now made another test with the Featured Category blocks and I can’t reproduce the issue that you mentioned.

Can you please check this page and see if this what you would like to achieve?

That’s a site using WooCommerce and Storefront. If that’s what you were trying to achieve I would recommend doing a conflict test and keep your site with only WooCommerce and WooCommerce blocks as plugins and then Storefront as your theme. Here you can find the instructions to perform this kind of conflict test.

I hope this helps.

Cheers!

Hey there,

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Cheers!