Change size of banner buttons on mobile

[Hugobrunto]

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 ❤️

/Hugo Brunto

[mrashid]

@Hugobrunto share store url

[Hugobrunto]

Hi, 

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

thanks for checking 🙂  

[mrashid]

@Hugobrunto  paste in base.css

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

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

[mrashid]

@Hugobrunto 

[Hugobrunto]

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 

[mrashid]

@Hugobrunto dont remove code let me check

[mrashid]

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

[DaisyVo · Accepted solution]

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 

[Hugobrunto]

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 ❤️ 

/Hugo Brunto 

[Hugobrunto]

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