Buy Now button too big on mobile version for Refresh Theme

[Minda23]

Hi,

Can someone help as this is driving me a bit mad!

I’ve had a look at other posts and tried the code suggested but its not fixing it.

How can I get the ‘Buy Now’ button to sit on the banner image as a small size on the mobile version? If I remove the container it will sit on the image but it is HUGE. So how can I either make the button smaller without container on mobile view?

See screenshot attached of mobile and desktop view.

Thank you!

[GemPages]

Hello @Minda23 ,

It’s the GemPages Support Team and we are glad to assist 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

[Minda23]

Hi, thank you for your reply yes it https://cocothepomsky.com/

No password

[shubhamSharma]

Hi @Minda23

step 01:

1. Go to your Store > Theme > click to edit code.
2. find this file "base.css " and open.

step 02:

1. Paste the code at the of the file.

@media only screen and (max-width:767px){
	.banner__box .banner__buttons a {
	    min-height: 0 !important;
	    padding: 10px 20px !important;
	    min-width: 0 !important;
	}
}

hope this idea helps you

[PageFly-Victor]

Hi @Minda23

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media(max-width: 767px) {
a.button.button--primary {
    min-height: 0 !important;
    padding: 10px 20px !important;
    min-width: 0 !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

[GemPages]

Hello @Minda23 ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team