Change size of banner buttons on mobile

Store Design
, ,
1

Hi Experts,

I’m facing an issue with our image banner buttons. Perfect on desktop view but on mobile they are too wide.. How to make them smaller only in mobile view? I’m using a purchased theme named IRIS. I’ve also tried several codes without any result.

If someone could find a solution, i’d very happy :heart:

Skärmavbild 2024-11-09 kl. 13.18.12.png
Skärmavbild 2024-11-09 kl. 13.18.12.png2880×1800 773 KB

Skärmavbild 2024-11-09 kl. 13.18.58.png
Skärmavbild 2024-11-09 kl. 13.18.58.png2880×1800 584 KB

/Hugo Brunto

2

@Hugobrunto share store url

3

Hi,

of course! Here it is: www.hugobrunto.se

thanks for checking :slightly_smiling_face:

4

HI @Hugobrunto

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.banner-buttons.banner-buttons--multiple > a {
    max-width: 200px !important;
    min-width: 200px !important;
}
.banner-buttons.banner-buttons--multiple {
    justify-content: center !important;
}
}​

Here is the result: https://prnt.sc/k20ovW2ZXATx

I hope this helps

Best,

Daisy

1 Like
5

@Hugobrunto paste in base.css

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

a.button.button--secondary {
    min-width: 16rem !important;
}
}
6

mrashid_0-1731156646700.png
mrashid_0-1731156646700.png512×302 159 KB

@Hugobrunto

7

Hi Mrashid,

I love this look! This is exactly what I would love to achieve. But unfortunately it doesn’t work. I pasted it in the bottom of base.css

Best regards,

Hugo Brunto

8

@Hugobrunto dont remove code let me check

9

Hi DaisyVo,

Actually this code works fine. But is it possible to get them side by side, as Mrashid above shown in his example?

Thanks again for taking your time, it means the world :heart:

/Hugo Brunto

10

@Hugobrunto okay you need to paste this custom css. let me know

1 Like
11

Hi again, this works perfectly! Thanks again! I found a solution thanks to this. I just increased the numbers in your code. :heart: