How to center the buy button & Quantity selector on product page? (dawn)

Topic summary

A user needed help centering the buy button and quantity selector on their Dawn theme product page for desktop view, as these elements were already centered on mobile but not on web.

Solution provided:

  • Remove max-width: 37rem; from .product-form__input on line 160 of section-main-product.css to center the quantity selector
  • Remove the entire .product-form__buttons class (around line 374 in the same file) to make the cart buttons full width

Outcome:
The CSS modifications successfully resolved the centering issue. The discussion is now closed with the problem solved.

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

How to center the buy button & Quantity selector on product page web? (dawn) I have added a photo for reference. Currently our mobile product page is center but our web product page isn’t. if you could help us it would be highly appreciated.

website: https://munnafashion.com/products/carsicko-dont-touch-knit-sweater-black

Remove max-width: 37rem; from .product-form__input on line 160 of section-main-product.css. This will make the quantity centered.

Next, remove the whole class:

.product-form__buttons {
     max-width: 44rem;
}

On line 473 of the same file. This will make the add to cart buttons full width.

1 Like

That worked! Thanks for your help! :black_heart: