I’m looking to make the quantity button more skinny the same size as the add to cart button in this page without Affecting the quantity buttons in cart drawers for mobile and desktop
password samurai
Topic summary
A user wants to reduce the width of the quantity selector button on product pages to match the “Add to Cart” button size, while keeping the cart drawer quantity buttons unchanged on both mobile and desktop.
Two CSS solutions were proposed:
-
Custom CSS approach (Dan-From-Ryviu): Add code to Theme Customizer > Custom CSS targeting
.product .quantitywithmin-height: 45pxandwidth: 100% -
Direct code edit (LizHoang): Modify
base.cssfile by adding.quantity { min-height: 42px !important; }at the end
Both solutions include screenshots showing the expected results. The first solution specifically targets product page quantity buttons (.product .quantity), which may better preserve cart drawer styling as requested. The discussion remains open with no confirmation from the original poster about which solution worked.
Hi @undercoverfresh
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
.product .quantity {
min-height: 45px;
width: 100%;
}
1 Like
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
.quantity {
min-height: 42px !important;
}
Result:
Best,
Liz
1 Like