Quantity selector weirdly hanging out to the side

Store Design

Topic summary

Issue: After adding a custom drop-down field to a Shopify product (Artisan theme), the quantity selector shifted to the right on desktop while appearing centered on mobile. The user wanted the quantity box stacked under the new drop-down. A live example was provided.

Fix: Add CSS via Online Store > Theme > Edit code > Assets > styles.css. Insert:
.shopify-product-form .line-item-property__field { float: left; width: 100%; }
This forces the custom field to take full width and stack elements vertically.

Outcome: The change resolved the layout issue immediately. No further actions required.

Status: Resolved. Code snippet is central to understanding the solution.

Summarized with AI on February 24. AI used: gpt-5.
1

I added a custom field (drop box) to a product and now the quantity box is hanging out to the right. It looks good on mobile, nice and centered, but on desktop it looks like this:

Untitled.png
Untitled.png1246×654 137 KB

How can I fix that? I need the quantity box to be under the drop box.

Here’s a link to the live page: https://tipsyhues.com/collections/shop/products/paint-at-home-kit

This is using the Artisan theme.

2

Hello @Anonymous ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->styles.css → paste bellow code in bottom of file
.shopify-product-form .line-item-property__field {
    float: left;
    width: 100%;
}

Thanks

3

@Guleria worked perfectly! Thank you so much!!!