How can I adjust mobile button size to match desktop on Palo Alto theme?

[GeorgeNebraska]

Hi,

I am using the theme Palo Alto and am trying to change the size of mobile buttons to be similar to desktop ones. 

See here:

It is so much longer than on desktop?

This one is much smaller

Is there some code that will make the buttons on mobile devices the same as desktop where it adjusts to the amount of copy there?

Thanks in advance

[suyash1]

it will need custom css, can you share your site link please?

[GeorgeNebraska]

pilates-with-amelia.myshopify.com

PW: whawtu

[suyash1]

what theme developers have done is that button is set to take all space available when it comes to mobile and hence it looks bit bigger, and also it is set for auto width so that it adjusts as per text.

we can set its width but it may cause an issue if you change text in future, else for now it can work. do you want to try it?

[GeorgeNebraska]

Hi,

I would like it set on auto-width so it adjusts to text. The mobile one seems like it is set up to take all space available.

If you can help me set mobile buttons to auto-width to adjust to text (same as desktop), that would be amazing.

Thanks.

G

[suyash1 · Accepted solution]

add this css to the end of your theme.scss file and we check

#shopify-section-1552545896050 .slider-cta .slider-btn{width: 200px; margin: 0 auto;}

[GeorgeNebraska]

Thanks so much for your support on this. It worked.

[suyash1]

welcome, you can adjust number as per the text if in future you remove/add text

[lorenased]

Hi, I have the same problem and would like to have a smaller button on my homepage (mobile version) as well. What can I do?

Thanks for your help!

Kind regards, 
Lorena

[suyash1]

@lorenased - we will need to adjust css for mobile view using media query, can you share your website link?  if you want to keep it private then can send via email below

[LisseStitch]

Hey Suyash,
Can you please help me as well