Dear team:
This is my url:https://7xyzhhcaxjvgux76-42324328597.shopifypreview.com
I have notice that the size selection for my rings are not aligned at center. Please advice
Topic summary
Issue: In Shopify’s Dawn theme, the ring size selector on the product page isn’t centered.
Evidence: A preview URL and a screenshot demonstrate the misalignment.
Proposed fix: Edit assets/section-main-product.css via Online Store → Theme → Edit code and append CSS targeting .product-form__input.
- Option A (more robust centering): Set min-width: inherit; width: max-content; margin: 0 auto; using !important to enforce styles.
- Option B (simpler): Set text-align: center on .product-form__input.
Impact: Both approaches aim to center the size selection UI within its container.
Notes: The screenshot is central to understanding the visual issue; the CSS rules are the key remedies suggested.
Outcome: No confirmation yet that either solution worked; no side effects or theme-version specifics were discussed.
Status: Open, awaiting user feedback or confirmation.
2 Likes
Please Go to Online Store->Theme->Edit code then go to assets/section-main-product.css ->paste below code at the bottom of the file.
.product-form__input {
min-width: inherit !important ;
width: max-content !important;
margin: 0 auto !important;
}
Thanks!
sorry for that issue can you please just add this code
- Go to Online Store->Theme->Edit code
- Asset->/section-main-product.css ->paste below code at the bottom of the file.
.product-form__input {text-align: center;}