Add to cart button alignment issues on WordPress

[ottisshore96]

I'm really hoping someone can help me here...

I created an ADD TO CART button in Shopify to display it in WordPress using Elementor page builder. The issue is that the button won't stay centered on some resolutions/ devices..

I really tried everything to keep it centered with no joy at all...

Here is the link to my store: http://seedlessbeverageco.com/

I have attached a video with my issue.

Some help would be greatly appreciated!

Thanks

[ZestardTech]

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme-styles-responsive.scss.css and paste this at the bottom of the file:

.shopify-buy-frame--product {
max-width: 100% !important;
}

[Kinjaldavra]

hello @ottisshore96 

please Go to Online Store-> Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

.shopify-buy-frame {
max-width: 100% !important;
}

[ottisshore96]

Thank you so much for your quick response. I did exactly as you requested and it did not work as per screenshot:

[Kinjaldavra]

hello @ottisshore96 

can you please share a screenshot of which file insert code?

[ottisshore96]

Sure! Here you go :

[ZestardTech]

Hello There,

1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >custom-frontend.min.css and paste this at the bottom of the file:

.shopify-buy-frame--product {
max-width: 100% !important;
}

[ottisshore96]

Hi Pallavi.

There is no such file in assets...

[Roxee541 · Accepted solution]

Hi Otis,

I was able to center it with my dev tools using this:

.shopify-buy-frame--product {
display: block;
margin: auto;
}

It's showing inline CSS, but in Elementor, you can add CSS, so you might try adding the CSS directly for this element on this page. It ended up centering all the ADD To CART buttons for your products in responsive mode. And if still not working, add !important: margin: auto!important;

[ottisshore96]

Wow Roxee541

You just fixed something that was eating at my brain for a long time!! Good on you!!! It worked!!

I just added your brilliant CSS to one button and it just fixed all the buttons for me.

Thanks so much!

[Roxee541]

Glad I could help Otis.

Yes, when I used my dev tools, it changed it for all the buttons, so I thought it would do the same thing when adding the CSS.

If you can mark this as an accepted solution, that would be great!

Good luck with your store! I like the idea of using Shopify payment buttons with Wordpress, as Shopify is a bit easier to process payments and mark as fulfilled.

Thanks!

Todd