Solved

cart drawer 'Checkout Now' button too large on mobile

Haiky21
Excursionist
20 0 5

Hey

 

I'll try to keep this as short as possible.

So basically if you go on the mobile website and look at the cart drawer, you will see that the 'Checkout Now' button appears to be larger than the other buttons and the text is basically all over the place. 

How do i go about trying to fix this or is there anyone who can do this for me?

 

 

Thank you

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7532 1453 1450

This is an accepted solution.

Hi @Haiky21 

Please add this code to your theme.liquid file, after <head> to solve it 

<style>
@media (max-width: 749px) {
.drawer .checkout-button {
    letter-spacing: 0.5px !important;
    padding: 0 15px;
}
.drawer .checkout-button .checkout-button__lock {
    left: 6px;
}
}
</style>

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7532 1453 1450

Hi @Haiky21 

Please share your store URL 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Haiky21
Excursionist
20 0 5

Hey Dan

Url is: Pet-Shack.com

 

Password is Lewceb

 

Thank you

Dan-From-Ryviu
Shopify Partner
7532 1453 1450

This is an accepted solution.

Hi @Haiky21 

Please add this code to your theme.liquid file, after <head> to solve it 

<style>
@media (max-width: 749px) {
.drawer .checkout-button {
    letter-spacing: 0.5px !important;
    padding: 0 15px;
}
.drawer .checkout-button .checkout-button__lock {
    left: 6px;
}
}
</style>

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Haiky21
Excursionist
20 0 5

Hey Dan

 

This works perfectly! Thank you for your help