How can I adjust the mobile 'Shop' button size to match desktop?

Store Design
1

Hi,

I need some help please changing the ‘Shop’ button size only on mobile. I want it to resemble the equivalent of the desktop sizing. Currently it’s far too big.

https://www.byanymeans.net.au/

Password to enter is: shopifyhelp

byanymeans_0-1688904993279.png
byanymeans_0-1688904993279.png454×256 23.5 KB

2

@byanymeans

Please share your store URL!

Thanks!

3

Apologies! Have updated it now

4

Hi @byanymeans ,

You like to change all the buttons? or only the dots?

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 450px){
.slider-counter__link--dots .dot {
    width: .5rem;
    height: .5rem;
}
}

Result:

Ribe_Dagandara_0-1688929156352.png
Ribe_Dagandara_0-1688929156352.png431×315 23.7 KB

I hope it help.

5

Hi @Made4uo-Ribe

Thanks for taking the time to reply. I think there maybe is some confusion here, I am not looking to change the size of the dots I am looking to change the size of the ‘SHOP’ button above for mobile as it does not scale the same as the desktop version.

6

oh okay, Sorry my bad I didnt read well..Is this solved?

7

That’s no problem. No unfortunately I haven’t solved it and the code above to make the buttons smaller also didn’t work for me

8

But the button now looks like this on my screen.

Ribe_Dagandara_0-1688994174171.png
Ribe_Dagandara_0-1688994174171.png421×247 26.9 KB

No border, and a bit small.