Help with Button Misalignment

[Nomad1]

Hello!

I've been having an issue with this for a while now. How can I align the "Buy Now" or "Shop with PAY" on the same line as the "Add to Cart" button?

Here are two images referring to the misalignment:

Thanks!

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[Zworthkey]

@Nomad1 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!

Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[dmwwebartisan]

@Nomad1 

Please share your store URL!

Thanks!

[Nomad1]

@ZestardTech @Zworthkey  @dmwwebartisan 

Thank you very much and I appreciate all the help I can get as this has been persisting for more than a month now!

https://nomad-nutrition.myshopify.com/

https://www.nomadnutrition.co/

Many thanks!

[dmwwebartisan]

@Nomad1 

Please add the following CSS code to your assets/styles.css bottom of the file.

.purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
    margin-left: 8px !important;
    max-width: calc(50% - 6px) !important;
    height: inherit !important;
    position: relative !important;
    float: right !important;
    top: -45px !important;
}

Thanks!

[Nomad1]

@dmwwebartisan 

Hi, it seems to work just a little bit, the difference is not huge, it moved slightly closer to "Add to  Cart".

I still have a misalignment error.

Also, why does the "More payment options" appear behind the "Buy with ShopPay"?

Thanks. Any help is appreciated.

[Nomad1]

Hi everyone!

I've figured it out. I kept code as is and set height to auto. It worked.

Thanks!