Make add to cart button less wide mobile (dawn theme)

Store Design
,

Topic summary

Goal: Make the product page’s “Add to Cart” button fit on the same row as the quantity selector (mobile). Site: carcleansweden.se.

Proposed solution (CSS in theme.css or base.css):

  • Float the quantity selector left and constrain its width (~46%) with a small right margin.
  • Set the adjacent container (with the button) to ~48% width and float left.
  • Tweak button padding and font size; clear subsequent blocks to maintain layout.

Key selectors used: .product__info-container .product-form__quantity, its adjacent div (+div), and product-form button adjustments.

Evidence: Before/after screenshots provided; the result shows quantity and button aligned side by side.

Status: A solution has been proposed with code; awaiting confirmation from the original poster. No conflicts or side effects reported so far.

Summarized with AI on December 15. AI used: gpt-5.
1

Hello,

I would like to adjust the width of my “Add to Cart” button in product page so that it fits on the same row as the quantity selection tool. Thank you in advance for your help! Our URL is: carcleansweden.se

CarCleanCC_2-1731088213894.png
CarCleanCC_2-1731088213894.png501×1064 165 KB

2

Hi @CarCleanCC

You can Achive this by adding this CSS in to you theme.css or base.css file

.product__info-container .product-form__quantity {float: left;display: inline-block;max-width: 46%;width: 100%;min-width: 46%;margin-right: 10px;!i;!;}
.product__info-container .product-form__quantity+div {width: 48%;float: left;}
.product__info-container .product-form__quantity+div product-form button { padding-inline: 10px; font-size: 13px; }
.product__info-container .shopify-block { clear: both; }

Result:

Mehran_Ali_0-1731092518457.png
Mehran_Ali_0-1731092518457.png1040×859 353 KB

If This Solution Work For You Kindly Mark this As A Solution and Buy ME A Coffee

1 Like