Reducing the size of "add to cart" button

I've used the following code to reduce the size of my 'Add to cart' button:

.sqs-add-to-cart-button {
    width: 25% !important;
}

However, when I click 'Add to cart', the preceding 'Adding', 'Added' and 'Added to cart' buttons are super narrow, so the text can't be read:

Is there a way to code the button, so it only resizes the initial 'Add to cart', but not the preceding ones?

Can you share link to a product page? We can help easier

I've realised you can set this via the Product Format popup (Form Width value), so am no longer using css. Thanks though.

Hi, 

I'm having the same issue on my product pages. On mobile view, the first add-to-cart button looks super narrow and the second one looks normal. When I apply code then it changes both buttons, so the second one turns out too big. Can you help me with changing the size of the first one? I'd like to apply this to all my product pages. Website: https://hallogermany.com/services-for-internationals/p/career-coaching

21 hours ago, JanaK said:

Hi, 

I'm having the same issue on my product pages. On mobile view, the first add-to-cart button looks super narrow and the second one looks normal. When I apply code then it changes both buttons, so the second one turns out too big. Can you help me with changing the size of the first one? I'd like to apply this to all my product pages. Website: https://hallogermany.com/services-for-internationals/p/career-coaching

Add to Design > Custom CSS

/* Mobile add to cart */
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}
}

On 12/1/2021 at 12:02 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile add to cart */
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}
}

 

Thanks Tuanphan! This worked like a charm. 

On 12/7/2021 at 6:05 PM, JanaK said:

Thanks Tuanphan! This worked like a charm. 

Just discover, the button on tablet doesn't look good, so you can use this new code

/* Mobile Tablet add to cart */
@media screen and (max-width:991px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
}
}

(I changed 767px to 991px)

@tuanphan I'm having a similar issue to the first comment on this thread - after I click the 'place an order' button, it reduces in size (see before and after screenshots attached). As well, I have a custom order form that comes up for these products, and the 'place an order' button on the form doesn't have an outline (I'd like it to look the same as the original button, with a simple 1px black outline). 

Are you able to help?

Thanks so much,
Garlande

Link: https://plum-furniture.squarespace.com/furniture/p/the-sandra-napper 

Pw: plum

On 11/9/2023 at 9:38 PM, garlandehaney said:

@tuanphan I'm having a similar issue to the first comment on this thread - after I click the 'place an order' button, it reduces in size (see before and after screenshots attached). As well, I have a custom order form that comes up for these products, and the 'place an order' button on the form doesn't have an outline (I'd like it to look the same as the original button, with a simple 1px black outline). 

Are you able to help?

Thanks so much,
Garlande

Link: https://plum-furniture.squarespace.com/furniture/p/the-sandra-napper 

Pw: plum

 

I see you figured it out? It looks fine to me

HI @tuanphan, I'm having a similar issue with the size of the button and purchasing options. See here: https://www.artelium.com/tickets/p/mothers-day-brunch-sun-10-mar

The product description is not aligned with the image on the left, and the 'Time' , 'Quantity' and 'Purchase' buttons are all far too big. Any ideas how we could resolve? 

Thanks! 

Nick

On 2/21/2024 at 10:14 PM, ntoomey said:

HI @tuanphan, I'm having a similar issue with the size of the button and purchasing options. See here: https://www.artelium.com/tickets/p/mothers-day-brunch-sun-10-mar

The product description is not aligned with the image on the left, and the 'Time' , 'Quantity' and 'Purchase' buttons are all far too big. Any ideas how we could resolve? 

Thanks! 

Nick

#1. Use this code to Custom CSS box

section.product-details.ProductItem-details {
    padding-top: 0px;
    position: relative;
    top: -5px;
}

#2. Use this CSS code

.product-details .variant-select-wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

input[aria-label="Quantity"] {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
div.sqs-add-to-cart-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}