Add to cart button alignment issues on WordPress

Solved
ottisshore96
New Member
5 0 0

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

0 Likes
Pallavi
Shopify Expert
2344 394 506

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Natztech
Shopify Partner
1878 489 1170

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
ottisshore96
New Member
5 0 0

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

 

screenshot-seedlessbeverageco.com-2021.07.29-16_41_42.jpg

0 Likes
Natztech
Shopify Partner
1878 489 1170

hello @ottisshore96 

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

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
ottisshore96
New Member
5 0 0

Sure! Here you go :

 

screenshot-seedlessbeverageco.myshopify.com-2021.07.29-16_49_42.jpgscreenshot-seedlessbeverageco.myshopify.com-2021.07.29-16_50_42.jpg

0 Likes
Pallavi
Shopify Expert
2344 394 506

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
ottisshore96
New Member
5 0 0

Hi Pallavi.

 

There is no such file in assets...

0 Likes
Roxee541
Excursionist
19 1 3

This is an 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;

Untitled-1.jpg

ottisshore96
New Member
5 0 0

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!

0 Likes