Solved

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

GeorgeNebraska
Excursionist
23 0 3

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?It is so much longer than on desktop?

This one is much smallerThis 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

Accepted Solution (1)
suyash1
Shopify Partner
9443 1176 1516

This is an 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;}

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me

View solution in original post

Replies 10 (10)

suyash1
Shopify Partner
9443 1176 1516

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
GeorgeNebraska
Excursionist
23 0 3

pilates-with-amelia.myshopify.com

PW: whawtu

suyash1
Shopify Partner
9443 1176 1516

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?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
GeorgeNebraska
Excursionist
23 0 3

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
Shopify Partner
9443 1176 1516

This is an 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;}

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
GeorgeNebraska
Excursionist
23 0 3

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

suyash1
Shopify Partner
9443 1176 1516

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
lorenased
Visitor
1 0 0

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
Shopify Partner
9443 1176 1516

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
LisseStitch
New Member
7 0 0

Hey Suyash,
Can you please help me as well