Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

pankhhari
Tourist
7 0 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. 

Accepted Solution (1)

namphan
Shopify Partner
1824 233 255

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 3 (3)

rajweb
Shopify Partner
358 35 49

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
pankhhari
Tourist
7 0 1
hey
It still did not resolve my issue.

namphan
Shopify Partner
1824 233 255

This is an 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;
}
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com