Issue Aligning Express Checkout Button on Tablet and Mobile

Hi everyone,

I’m having trouble with aligning the Express Checkout button on my WooCommerce checkout page for tablet and mobile views. I moved the Express Checkout button to display above all payment methods using this PHP code from this thread 8 month ago:

add_action('init', function() {
    remove_action('woocommerce_checkout_before_customer_details', ['WC_Stripe_Field_Manager', 'output_banner_checkout_fields']);
    add_action('woocommerce_review_order_before_payment', ['WC_Stripe_Field_Manager', 'output_banner_checkout_fields']);
});

While this works well on desktop, I’m facing alignment issues on tablet and mobile screens. The button doesn’t stay centered with the other elements in these views.

Computer: https://imgur.com/Bd9kpC9

Tablet: https://imgur.com/TE7cks3

Mobile: https://imgur.com/SVx11qa

I’ve also tried using the following CSS to center-align it specifically for smaller screens, but it doesn’t seem to work as expected:

/* For tablets (up to 768px width) */
@media (max-width: 768px) {
    .wc-stripe-banner-checkout.active {
        width: 100%;
        max-width: 450px; /* Adjust this width if needed */
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}

/* For mobile devices (up to 480px width) */
@media (max-width: 480px) {
    .wc-stripe-banner-checkout.active {
        width: 100%;
        max-width: 400px; /* Adjust this width if needed for mobile */
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}

Unfortunately, this CSS does not resolve the issue, and the button remains misaligned on mobile and tablet.

Could anyone advise on why this might be happening or suggest an alternative solution to center-align the Express Checkout button on tablet and mobile devices?

PS. I’m using Elementor Pro for the checkout page and Astra theme for my site.

Any help would be greatly appreciated!

Thank you!