''Add to cart'' button UNDER quantity button on mobile version DAWN theme

Nederlands Discussies Shopify-ontwerp
,

Topic summary

Goal: Place the “Add to cart” button under the quantity selector on mobile, while keeping them side-by-side on desktop/tablet in the Shopify Dawn theme.

Context: The merchant used custom CSS (.product-form .product-form__submit with width: calc(100% - 150px), margin-left: 150px, margin-top: -72.5px) to position the Add to cart button next to the quantity control. This styling currently applies across all viewports, causing an undesired layout on mobile.

Assets: Two images are provided—one showing the current layout, another showing the desired mobile layout—important for understanding the request.

Request: Guidance on adjusting the CSS so that, specifically on mobile, the Add to cart button stacks below the quantity selector (e.g., via responsive rules), without altering desktop/tablet behavior.

Status: No solution posted yet; the question remains open.

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

Hello,

I have used some custom codes to place my add to cart button next to the quantity button as shown in the first image. But for the mobile version I would like my add to cart button UNDER my quantity button, like the second image. Is there someone who knows how I can solve this? Would really appriciate this :smiley: I used the following code:

}
.product-form .product-form__submit {
width: calc(100% - 150px) !important;
margin-left: 150px !important;
margin-top: -72.5px !important;
}

HOW IT IS NOW ON DESKTOP/TABLET/MOBILE

Schermafbeelding 2024-07-06 015919.png
Schermafbeelding 2024-07-06 015919.png724×156 4.67 KB

HOW I WANT IT TO BE ON MOBILE

WhatsApp Image 2024-07-06 at 02.01.10.jpeg
WhatsApp Image 2024-07-06 at 02.01.10.jpeg1080×720 44.2 KB