pl assist me on how to customise the button size for mobile view

Store Design

Topic summary

A user is experiencing an issue with oversized button labels in their website’s banner slideshow when viewed on mobile devices. The large “Shop Now” button is covering most of the screen and obscuring the background image.

Solutions Attempted:

  • Two community members provided CSS code snippets to add to the theme files (theme.css/styles.css or base.css)
  • First solution targeted .slideshow__btn class with reduced font-size and padding
  • Second solution modified .slideshow__text .button.button--primary with smaller dimensions
  • Third solution adjusted .banner__buttons .button min-height to 35px

Current Status:

  • The issue remains unresolved after multiple CSS attempts
  • The user reports the button outline is still too broad and covers excessive screen space
  • A helper has requested a screenshot to better diagnose the problem, though the user mentions difficulty uploading images to the forum

The discussion is ongoing as participants work to identify the correct CSS selectors and values needed to properly resize the mobile button.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
3

Hi @pankhhari ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.slideshow__text .button.button--primary {
    padding: 1rem;
    font-size: 0.8rem;
    min-height: auto;
    min-width: auto;
}
}