Re: cart drawer 'Checkout Now' button too large on mobile

Haiky21 · ‎03-04-2024

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

Dan-From-Ryviu · ‎03-05-2024

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎03-04-2024

Hi @Haiky21

Please share your store URL

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Haiky21 · ‎03-05-2024

Hey Dan

Url is: Pet-Shack.com

Password is Lewceb

Thank you

Dan-From-Ryviu · ‎03-05-2024

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Haiky21 · ‎03-05-2024

Hey Dan

This works perfectly! Thank you for your help

Re: cart drawer 'Checkout Now' button too large on mobile

cart drawer 'Checkout Now' button too large on mobile

Community Blog Articles