add to cart button reducing once added

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

2 hours ago, sundayseltzer said:

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Looks like for some reason the button get's applied an inline style that continues to reduce the width. That might be a Squarespace bug. However, try adding this to Custom CSS:

.product-block .productDetails.center .sqs-add-to-cart-button-wrapper {
  width: 100% !important;
} 

Hi @NickScola

that worked perfect for the size reduction, however the button, once pressed, shoots off to a left alignment.
is there anyway to keep it centre aligned after being pressed?

thanks

Elvin

44 minutes ago, sundayseltzer said:

Hi @NickScola

that worked perfect for the size reduction, however the button, once pressed, shoots off to a left alignment.
is there anyway to keep it centre aligned after being pressed?

 

thanks

Elvin

That's so strange. Add this:

.sqs-add-to-cart-button { margin: 0 auto; }

@NickScola Fantastic, that has worked perfectly!!

Do you know a code to reduce the block padding around the 'add to cart button'?
I am trying to stack the buttons closer together.

thanks,

Elvin

4 minutes ago, sundayseltzer said:

@NickScola Fantastic, that has worked perfectly!!

Do you know a code to reduce the block padding around the 'add to cart button'?
I am trying to stack the buttons closer together.

thanks,

Elvin

Yes, there's a few ways to go about this. Have a go at this:

.product-block .buy-button, .product-block .sqs-add-to-cart-button-wrapper {
  margin-top: 5px;
  margin-bottom: 5px;
}

Also, if your'e wondering why the checkout button is not moving closer its because there's a blank Squarespace block before the checkout button

On 7/6/2021 at 10:39 PM, sundayseltzer said:

Site URL: https://www.sundayseltzer.co.uk/barge-drinks

Hi there,

 

I have managed to re label all my 'add to cart buttons' and the are looking great however once the button has been pressed and the product 'added!' to cart the button reduces in size by approx 25% . if you press the button again, it reduces by a further 25% etc etc.
 

how can I stop the button reducing every time the product has been added to cart. in the images you can see the 'beer can' product has reduced.

regards,

Elvin 

Hi. I see some small problems. Do you want to fix these?

Site URL: https://www.sundayseltzer.co.uk/

1. (Tablet/Mobile – Overlay menu) Increase font size?

2. (Tablet – Footer) “Competition” (in T&C’s column) don’t lie on the same row. (Email too)

3. (Desktop/Tablet – homepage) Make 3 buttons on the same line