Reduce width of "add to cart" button on Product pages

I'd like to reduce the width of my add-to-cart button on all product pages. They max out the width of the product box and look quite odd... I'd prefer them to be about 50%. 

https://www.porfiriogutierrez.com/shop

@mphdesign You can try adding this code snippet under Website > Utilities > Website Tools > Custom CSS

.tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart {
	justify-content: center !important;
	align-items: center !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}
@media only screen and (max-width: 640px) {
	.ProductItem-details .sqs-add-to-cart-button-wrapper {
		width: 50% !important;
	}
}

Thank you - that worked! If I want to fiddle with the width, which settings do I customize?

Awesome!

To adjust the width on the shop page, you can change the width "70%" inside this block of code. You've to add this block of code with the previous code.

section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}

And to adjust the width on the product page, you can change the width "35%" inside this block of code. You added this block of code already:

.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}

Thanks - when I add that first snippet of code above I don't see a change (even when I try other numbers other than 70%). Do I delete any of the other code you gave me? 

@mphdesign Can you try the updated code? Here's the entire version:

.tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart {
	justify-content: center !important;
	align-items: center !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
	width: 35% !important;
}
section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}
@media only screen and (max-width: 640px) {
	.ProductItem-details .sqs-add-to-cart-button-wrapper {
		width: 50% !important;
	}
}

Thank you so much, this worked! I really appreciate your help!

This mostly worked for me, but does not centre the add to cart button... 

www.mightypines.ca

On 6/1/2024 at 12:18 AM, JocelynMPC said:

This mostly worked for me, but does not centre the add to cart button... 

www.mightypines.ca

To center it, use this code

.tweak-product-basic-item-add-to-cart-standalone .ProductItem .sqs-add-to-cart-button-wrapper {
    margin: 0 auto;
}

Hmmm, didn't work. I'm refering to the botton on the product page if that helps?

On 6/14/2024 at 11:30 PM, JocelynMPC said:

Hmmm, didn't work. I'm refering to the botton on the product page if that helps?

 

I see it already center