I am using Dawn theme. The “Add to cart” or “Sold out” button in the product page is fine on desktop but it doesn’t show an optimum size on mobile version. How could I adjust to a non wrapped size?
Thanks!
Topic summary
-
Issue: On the Dawn theme product page, the “Add to cart”/“Sold out” button displays at an suboptimal size on mobile (wrapping text), while it appears fine on desktop. Images were shared to illustrate the mobile layout problem.
-
Request for details: A helper asked for the store URL to inspect the specific implementation and provide a tailored fix.
-
Proposed fix: A CSS solution was suggested using a media query for mobile screens (max-width: 768px). It sets the flex-basis of the add-to-cart button next to the quantity input to calc(65% - var(–space-unit)) to prevent wrapping:
@media (max-width: 768px) { .quantity-input+.product-info__add-button { flex: 0 0 calc(65% - (var(–space-unit))); } } -
Notes on selector: The class was taken from a store named “The Zone.” If the store differs, the OP should provide the correct link so selectors can be adjusted.
-
Status: No confirmation that the CSS resolved the issue yet; the thread remains open pending the store URL and feedback.
1 Like
@rvdwcmarketing
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.
add this css
@media (max-width: 768px) {
.quantity-input+.product-info__add-button {
flex: 0 0 calc(65% - (var(–space-unit)));
}
}
P.S. I grabbed the button class from the store - The Zone. If you meant a different store, could you provide a link so I can help you there?