How to make quantity selector the same width as the 'buy now' button - Dawn Theme

Store Design
, , , , , ,

Topic summary

A user wants to make the quantity selector match the width of the ‘Buy Now’ button across all devices (mobile and desktop) on their Dawn theme store.

Solution Provided:

Another user offered CSS code to achieve this:

  • Navigate to: Online Store → Theme → Edit code
  • Open the base.css file
  • Add CSS targeting .quantity-input.quantity and .product-form__quantity classes
  • Set width: 100% and min-width: 100% properties

The solution uses !important flags to ensure the styling overrides existing theme CSS. The user included a product page URL as reference for the desired layout change.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I’d like to make the quantity selector the same width as the buy now button (as shown in attached image).

I’d like this to be for all media e.g. mobile, desktop..

Any advice is really appreciated.

URL: https://tyton.uk/products/height-growth-capsules

Dawn theme

BraxtonEcom_0-1691923521189.png
BraxtonEcom_0-1691923521189.png3034×1596 288 KB

2

Hello @BraxtonEcom ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.product-form__quantity {
    width: 100% !important; 
    min-width: 100%;
}
quantity-input.quantity {
    width: 100%; 
}

Thanks