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

[pankhhari]

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. 

[rajweb]

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

[pankhhari]

hey
It still did not resolve my issue.

[namphan · Accepted solution]

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

[pankhhari]

Hey 
I'm still facing an error in mobile mode. Please guide "www.pankhhari.com"

[namphan]

Hi @pankhhari,

Please describe your request further. I will check it.

[pankhhari]

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 

[namphan]

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

[pankhhari]

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

[namphan]

Hi @pankhhari,

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