Solved

cart drawer 'Checkout Now' button too large on mobile

Haiky21
Excursionist
21 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
7726 1506 1515

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 and Accept solution or 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
7726 1506 1515

Hi @Haiky21 

Please share your store URL 

- Helpful? Like and Accept solution or 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
21 0 5

Hey Dan

Url is: Pet-Shack.com

 

Password is Lewceb

 

Thank you

Dan-From-Ryviu
Shopify Partner
7726 1506 1515

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 and Accept solution or 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
21 0 5

Hey Dan

 

This works perfectly! Thank you for your help