Revamp - Product Quantity _Increment Needs Attention - Dawn Theme

Store Design

Topic summary

Mobile product page in Shopify Dawn theme shows a broken/incorrect product quantity increment UI (illustrated via an attached screenshot and a mobile store link).

Most recent fix provided:

  • Add a mobile-only CSS override to assets/base.css for screens max-width: 749px.
  • The snippet adjusts .visually-hidden positioning/clipping and forces .quantity { width: 100% !important; } on mobile.

Outcome:

  • The original poster confirms the solution worked and thanks the responder.
  • No further issues or follow-up questions are raised; the thread appears resolved.
Summarized with AI on February 26. AI used: gpt-5.2.
1

Hi all,

Please see attached image and help in fixing the product quantity increment issue. I don’t know why this is happening when viewing on mobile. Feel free to view store on mobile here

Mobile View 1.png
Mobile View 1.png660×2086 417 KB

Thank you in advance!

1 Like
2

@PeterMantu

Please add following css your assets/base.css botttom of the file.

@media screen and (max-width: 749px){
.visually-hidden {
    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    word-wrap: normal!important;
}
.quantity { width: 100% !important;}
}

Thanks!

1 Like
3

@dmwwebartisan Thank you so much for your help!