Changing the width of the Add To Cart button in Brooklyn theme

[Tay_Tze_Wee]

Hi noam b,

Try this 

#AddToCart--product-template {
 width: 350px; 
}

[noam_b]

Thank you very much it worked :)

[Soummyadip_Sing]

Thank you 

[Simo1]

Thank you very much it worked :)

[Dezign]

Thank you it worked for me too, but...

It looks great on desktop, but now the AddToCart button is too big on mobile. It goes off the screen only on the right side and looks unprofessional. Is there a way to make it adjust automatically for mobile? Or to manually set an additional width for only mobile?

[kirtjammyftw]

Hi ! May I know where can I place this code to change the cart icon size?

#AddToCart--product-template {
width: 350px;
}

---

@Tay_Tze_Wee wrote:

Hi noam b,

Try this 

#AddToCart--product-template {
 width: 350px; 
}

---

[seangerke]

if you are looking to change a button on a certain page or collection.

Find the button code on that page, like the code on the product.template section <-- just as reference

then add this to the end of the code: 

style="height:50px; width: 80px; font-size:22px;"

Full example:

<button type="submit" name="add" id="addToCart-{{ product.variants.first.id }}" class="{{ btn_class }} btn" style="height:50px; width:80px; font-size:8px;" > 

Change the numbers in height width and font size to affect that one button and not globally all buttons. Just know it will change all buttons on that page for all items that are under that display.