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.
1

my website is www.pankhhari.com and if you’ll see banner slideshow 1st image on mobile view button label is too huge for mobile view. pls assist me to make the size smaller.
for some reasons i am unable to upload a jpeg or png file here.

2

Hey @pankhhari ,

You can adjust the size of the button label for mobile view by adding some CSS to your theme. Follow these steps:

  1. Online Store > Themes > Edit Code

  2. Look for the theme.css or styles.css file (it may be in the Assets older).

Scroll to the bottom and add the following CSS:

@media only screen and (max-width: 768px) {
  .slideshow__btn {
    font-size: 14px !important; /* Adjust size as needed */
    padding: 8px 16px !important;
  }
}

Click Save, then refresh your website on mobile to see the changes

If this still doesn’t resolve the issue or if the class name is different, let me know, and I’ll guide you on identifying the correct class through the inspection tool.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

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;
}
}
4

hey
It still did not resolve my issue.

5

Hey
I’m still facing an error in mobile mode. Please guide “www.pankhhari.com”

6

Hi @pankhhari ,

Please describe your request further. I will check it.

7

So basically if you view the site www.pankhhari.com on mobile view, the shop now on the slideshow covers most of the screen. I want to resize it to a smaller size so that its visible and the background is visible too

im unable to upload image since its not allowed png

8

Hi @pankhhari ,

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

.banner__buttons .button {
    min-height: 35px;
}
9

the outline is still too broad to cover the entire space. please suggest

10

Hi @pankhhari ,

Can you send me a screenshot describing it? I will check it again