checkout text layout error urgent need css

Hi @renovomotors,

Thanks for reaching out and welcome to the WooCommerce support forum. I understand you’re seeing a layout issue on your checkout page and need urgent help with the CSS. I’ve checked the page on both mobile and desktop, but everything appears to be displaying correctly on my end.

The screenshot you shared doesn’t clearly highlight a specific error, so to better understand what you’re seeing, could you let us know exactly which part of the layout looks off or isn’t functioning as expected? If possible, please mark the affected area or describe the issue in more detail so we can assist you more accurately.

Looking forward to your update so we can help you resolve this quickly.

Hello Prithvi,

Thank you for your reply.

The appearance of pages is controlled by your theme. I recommend switching to a default theme like Twenty Twenty-Four to see how the Checkout page looks. If the issue is resolved with the default theme, please contact your theme’s support for further help.

Let me know how it goes.

Best regards.

Hi @renovomotors,

Thanks for confirming it’s theme-related!

Here’s a CSS snippet you can try adding to your site (under Appearance > Customize > Additional CSS) to fix the issue on mobile:

@media (max-width: 767px) {
    .ast-modern-checkout .woocommerce form.woocommerce-checkout .woocommerce-billing-fields-custom .ast-checkout-form-heading {
        flex-direction: column;
    }
}

Since this involves theme-specific styling, further custom CSS changes are outside our support scope. If you need more help customizing the layout, I recommend working with a developer.

If you’ve found our plugin helpful, we’d really appreciate it if you could leave us a review here: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/ 💛