Reduce the size of button "add to cart" on smartphone

Store Design
,

Topic summary

A user seeks to reduce the size of the “add to cart” button on mobile devices within a featured collection on their Shopify store (Dawn theme).

Solutions Provided:

Two respondents offered similar CSS-based approaches:

  • Navigate to: Online Store > Themes > Actions > Edit Code
  • Locate the base.css file in the Assets folder
  • Add custom CSS code at the bottom of the file

Proposed CSS modifications include:

  • Media queries targeting screens with max-width of 749px-800px
  • Adjusting button width, font size, display properties, and transform scale
  • Using !important declarations to override existing styles

Both solutions involve targeting the quick-add/submit button class with responsive design rules. The thread includes code snippets and result screenshots, though some text appears corrupted or reversed in the original posts.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, do you know how to reduce the size of “add to cart” button on smartphone in this featured collection?

URL SITE: https://refade-8966.myshopify.com/

password: chauri

Dawn theme

Immagine 2023-07-23 112703.png
Immagine 2023-07-23 112703.png467×821 249 KB

1 Like
2

Hey,

Go to Online store > theme > actions > edit code.

Find assets folder > base.css file.

Copy and paste this code at the bottom of the file.

@media screen and (max-width: 700px) {
  .button--full-width {
    transform: scale(0.8);
  }
}

Result:

dannyelo_0-1690137898878.png
dannyelo_0-1690137898878.png1164×1654 461 KB

Hope this helps!

1 Like
3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media screen and (max-width: 749px) {
.quick-add__submit {
width: auto;
font-size: 14px!important;
display: inline-block
}
}

ZestardTech_0-1690176300557.png
ZestardTech_0-1690176300557.png1155×830 243 KB

1 Like