Changing buy buttons to one line

[Motoblox]

My buy buttons currently look like this: 

How can i make them look like this instead:

Basically i want them to be in the same line and have the mobile version be the same as it is

[Markit-Themes]

Hi Motoblox,

Could you please provide your store URL? I’ll provide the CSS code needed to achieve the result you’re looking for.

Regards,

Markit-Themes

[Motoblox]

https://motoblox.com/

sure here it sis

[Moeed]

Hey @Motoblox 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.shopify-payment-button {
    width: 50% !important;
}
.product-form__submit {
    width: 15rem;
}
.product-form__buttons {
    display: flex !important;
    gap: 2rem !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Motoblox]

this is looking good thanks a lot is there a way to add a small text box over buy now that says there is a discount on prepaid orders

Here is a example: 

Also if you can help me round the buttons that would go a long way

[Motoblox]

this looks so good now, can you please also help me add a small text box above buy now for prepaid orders

Here is a example:

If i can also round the buttons like this that would be so good

[Moeed]

Hey @Motoblox 

Your store is password protected, can you share the password as well?

Best Regards,

Moeed

[Motoblox]

i have removed it now