How to make add to cart button wider

Solved

How to make add to cart button wider

DaniCollantes
Tourist
12 0 2

Hi, I'm experimenting some troubles at the time of matching the add to cart button with the rest of the widgets in the product page, if anyone can help me please. Thewebsite isn't live yet so i can't share Maquina de Contenido.png

Accepted Solution (1)
Rahul_dhiman
Shopify Partner
234 44 43

This is an accepted solution.

Go to online store ---------> themes --------------> actions ------> edit code-----> assets -->theme.min.css
add this at the end of the file.

@media (min-width: 1024px) {
.lg\:w-3\/4 {
width: 100% !important;
}
}

and the result will be
9.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 13 (13)

BSSCommerce-HDL
Shopify Partner
1111 379 448

Hi @DaniCollantesCan you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
DaniCollantes
Tourist
12 0 2

My problem is that my new store isnt live yet, i need to fix it before publishing it

Rahul_dhiman
Shopify Partner
234 44 43

Hello @DaniCollantes 
as i can see, the button seems to be perfectly aligned., let me know you are checking on which screen.
4.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
DaniCollantes
Tourist
12 0 2

Yes, in this website yes is for the new website that i'm creating that isn't live yet.
How can I share to you?

Rahul_dhiman
Shopify Partner
234 44 43

provide me the url of your new store.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Rahul_dhiman
Shopify Partner
234 44 43

This is an accepted solution.

Go to online store ---------> themes --------------> actions ------> edit code-----> assets -->theme.min.css
add this at the end of the file.

@media (min-width: 1024px) {
.lg\:w-3\/4 {
width: 100% !important;
}
}

and the result will be
9.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
DaniCollantes
Tourist
12 0 2

It's working!!! Thank you so mutch

Rahul_dhiman
Shopify Partner
234 44 43

always there to help you.
please hit the like button also.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

Moeed
Shopify Partner
4365 1123 1380

Hey @DaniCollantes 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
DaniCollantes
Tourist
12 0 2

Yes, in this website yes is for the new website that i'm creating that isn't live yet.
How can I share to you?

Moeed
Shopify Partner
4365 1123 1380

Hey @DaniCollantes 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.add-to-cart-container.mt-8.lg\:w-3\/4 {
    width: 100% !important;
}
</style>

RESULT:

Moeed_0-1720694901439.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

sahilsharma9515
Shopify Partner
1079 132 203

Hi @DaniCollantes Please add the code to solve the issue.

 

 

<style>

.add-to-cart-container.mt-8.lg\:w-3\/4 {
    width: 100% !important;
}

</style>

 

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above </body> tag

Result:

 

sahilsharma9515_0-1720694644823.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️