How to stack payment buttons vertically on MOBILE

[CreatorTim]

Hey guys, I want to adjust the payment buttons on mobile.

I’d like to stack them vertically:

• On top: “Add to cart”
• Below that: “Pay with PayPal”
• And below that: “More payment options”
  
  

Currently, the layout is adapted based on how I’ve set it up for the desktop, but I want to leave the desktop version as it is. On mobile, I want the buttons to be stacked vertically and almost the full width of the screen.

Here’s how it looks on my store right now:

And here’s how I want it to look:

 

My store URL: https://1049xn-ya.myshopify.com/

 

And here’s a store where it looks the way I want: https://tomnoske.store/ (check it out on mobile; the desktop version is the same as mine)

I ONLY WANT THIS ON MOBILE!

Thanks a lot,
Tim

[LizHoang · Accepted solution]

Hi @CreatorTim 
I hope this answer will be helpful to you.

Please follow the following instructions:
1. Go to Shopify > Theme > Customize: https://prnt.sc/Lc3MCyXpW8zw
2. Copy and paste this code on Theme settings > Custom CSS section: https://prnt.sc/pmYP1ElPwdh7

@media (max-width: 768px) {
.product-form__buttons {
    flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
    width: 100% !important;
}
}

Here is the result.

Best,
Liz - Avada Support Team.

[CreatorTim]

Thank you! WORKS