Jump to content

Reducing the size of "add to cart" button

Recommended Posts

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:

Added.png.ef97c421a048038c20ffcd455210e420.png

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

Link to comment
  • Susana_SQSP changed the title to Reducing the size of "add to cart" button
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

  • 5 months later...

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

image.png.7c85762ad98f285b4a909558d4b3c35c.png

Link to comment
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

image.png.7c85762ad98f285b4a909558d4b3c35c.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

@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

 

place an order - before.png

place an order - after.png

place an order custom form - button.png

Link to comment
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

 

place an order - before.png

place an order - after.png

place an order custom form - button.png

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

image.png.d32f3d24baab738d9f067b6c798f4ce1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.