How to Center 'add to cart' button in product description

Site URL: https://www.intro-verso.com/all-new-products

Hello,

I'd like to move my Add To Cart button (which I changed the text of to 'contact to purchase') to the center of the text block.

At the moment it is alligned left, just like the text which looks messy espacially on mobile view. However I don't see an option to manually do this, is there a code to make this change?

Any help is much appreciated!

4 hours ago, Mathias654321 said:

Site URL: https://www.intro-verso.com/all-new-products

Hello,

 

I'd like to move my Add To Cart button (which I changed the text of to 'contact to purchase') to the center of the text block.

At the moment it is alligned left, just like the text which looks messy espacially on mobile view. However I don't see an option to manually do this, is there a code to make this change?

 

Any help is much appreciated!

You can try adding to Home > Design > Custom Css

.sqs-add-to-cart-button-wrapper {
  text-align:center;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

On desktop

On Mobile

17 hours ago, bangank36 said:

My testing result

On desktop

On Mobile

This works well, thank you very much!

Is there a way to only implement this on mobile view, and keep the button alligned left for desktop view?

That would be my ideal setup.

Appreciate your time

On 11/10/2021 at 4:30 PM, Mathias654321 said:

This works well, thank you very much!

Is there a way to only implement this on mobile view, and keep the button alligned left for desktop view?

That would be my ideal setup.

 

Appreciate your time

Try wrap the code in media query.

First, remove above code & use this code

@media screen and (max-width:640px) {
.sqs-add-to-cart-button-wrapper {
  text-align:center;
}
}

On 11/12/2021 at 3:47 PM, tuanphan said:

I added this code to Enchant and Delight.com.au but it didn't work? Any idea why?

@media screen and (max-width:640px) {
.sqs-add-to-cart-button-wrapper {
  text-align:center;
}
}

 

4 hours ago, christina_marie_333 said:

 

the site url doesn't work

Delight.com.au

Hey I tried this for my 7.1 site but it didn't work, is that different?

Relatedly, on mobile, the text for my "Materials" dropdown is overlaying the dropdown caret, I'd love some ideas on that too (see screenshot). Thank you! 

Site is https://piccolo-prism-pb2h.squarespace.com/ password is boysdrool 

13 hours ago, lynnesome said:

Hey I tried this for my 7.1 site but it didn't work, is that different?

Relatedly, on mobile, the text for my "Materials" dropdown is overlaying the dropdown caret, I'd love some ideas on that too (see screenshot). Thank you! 

Site is https://piccolo-prism-pb2h.squarespace.com/ password is boysdrool 

Use this CSS code for both problems

/* mobile product */
@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    width: 90% !important;
}
#page .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper {
    margin: 0 auto !important;
}
}