How to adjust payment buttons 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

[Hasan112]

@CreatorTim 

@media (min-width: 480px){
  #shopify-section-template--22711083893001__main .product-form__buttons {
    display: flex !important;
    flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
    width: 100% !important;
}

}

Go to Theme > Customization > Theme Setting > CSS

If its helpful , please Like & Accept as solution Thanks 

[CreatorTim]

Thanks for the feedback! Here's the translated version:

Hey, thanks for the feedback, but when I put it into theme settings -> custom CSS, it doesn’t work. When I click "Save," it says, "Online store session can't be published."

And when I added it to base.css, the changes applied to the desktop, but the mobile stayed the same. I want the exact opposite—I want it only on mobile, and I want the old version to remain on the desktop.

Thank you!

[Hasan112]

<style>

@media (min-width: 480px){
#shopify-section-template--22711083893001__main .product-form__buttons {
display: flex !important;
flex-direction: column !important;
}
.product-form__buttons .shopify-payment-button, .product-form__buttons .product-form__submit {
width: 100% !important;
}

}

</style>

Put these Css on theme.liquid 

And if it works please accept as Solution.

[CreatorTim]

Still the same, it works on desktop, but nothing on mobile.

I only want this on mobile.

[Hasan112]

Did you paste Css in media tag

@media (min-width: 480px){

Css

}

If its not work I need to login via collaborator . Allow my to fix it