Reduce size of the "shop" buttons? (mobile)

Store Design
, , , ,

Topic summary

A user wants to reduce the size of “shop” buttons on mobile for their Shopify store using the Trade theme.

Solution Provided:

  • Navigate to the theme’s base.css file through the Shopify editor
  • Add custom CSS targeting mobile screens (max-width: 749px)
  • The code modifies .banner--mobile-bottom .slideshow__text .button properties
  • Sets specific dimensions: 100px width, 40px height, with min/max constraints
  • Removes default padding using !important flags

Status: Resolved with working CSS code and visual confirmation showing the reduced button size on mobile devices.

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

Hello,

I would like to make the changed displayed in the picture, can someone help me?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/

Im using the Trade theme.

Bildschirmfoto 2024-07-14 um 3.21.45 PM.png
Bildschirmfoto 2024-07-14 um 3.21.45 PM.png387×476 108 KB

2

This preview link has expired

Can you share again @KimGottwald

3

Updated, sorry!

4
  • Here is the solution for you @KimGottwald
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 749px) {
    .banner--mobile-bottom .slideshow__text .button {
        padding: 0 !important;
    width: 100px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
    }
}
  • Here is the result you will achieve:

BSSTekLabs_0-1720965289709.png
BSSTekLabs_0-1720965289709.png372×795 190 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like