How can I resize my image banner button on mobile in Refresh theme?

Store Design
, ,
1

Hi guys, I’m having issues trying to resize my Shopify store image banner button on mobile, to make the button smaller in width. I am using the refresh theme. I have tried editing the width in the base.css files with

@media screen and (max-width: 750px) {

banner__content .button { width: 50% !important; max-width: 50% ! important; } }

I have tried different variations of this including

@media screen and (max-width: 750px) {
banner__content { width: 50% !important; max-width: 50% ! important; } }

I have also tried using px instead of % I have played round with the sizing 100 - 25 and still see no difference, I saw results for desktop when removing @media screen and (max-width: 750px).

Is anyone able to help ?

2

Hello @callum146 ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Hi @callum146

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.

4

Hi @callum146
Please share your store url and password

5

www.trengear.com I have disabled the password,

thank you so much

6

Hi @callum146

Please open the file base.css and add this code at the end of the file:

@media screen and (max-width: 750px){
  .banner--content-align-mobile-center .banner__buttons--multiple>* {
     min-width: 12rem !important;
     padding: 0 2.5rem !important;
  }
}

I hope that it works for you.

1 Like
7

Thank you so much, works perfectly

1 Like