WooCommerce checkout order-received page layout - possible bug

Hi Manuel,

That's the style added by GP Woocommerce module.

Would you like to remove the style for checkout page?

Hi Ying,

thanks for your fast answer.
No i don't want to remove the style for the checkout page.
If you have a look at the main segment you can see, that the height does not fit.
The invoice & delivery address is located on the outside of the container.
Check where the white background color of the main container ends.
The entire billing/delivery address block should be inside the main segment

Check the image, I've highlighted the main container: https://imgur.com/R6rMMPk

Best
Manuel

Hum.. it does look like a bug, thanks for reporting it to us, we'll look into it.

For now, you can use this CSS:

.woocommerce-checkout .col2-set {
    float: none;
}

Your CSS works. Thanks. :)

You are welcome :)

Hey,
Thanks Manuel for opening up this Topic for layout issues.
I am having the same issue and thanks to Ying have managed to temporarily sort it using the CSS.

Any word on a permanent fix or update?

Best Regards,
Abhishek V.

Hi there,

This bug is scheduled to be fixed in GPP 2.2.0.

Thanks!

Thanks Tom for the update!
That's great!

Is this still an issue in the latest WooCommerce? I'm not able to reproduce on my end when viewing the Order Received page.

Hi Tom,
yes, this is still reproducible. the .woocommerce-customer-details section is still located outside of the .site-main if you do not set

.woocommerce-checkout .woocommerce-customer-details .col2-set {
float: none;
}

Strange, I'm not able to reproduce on my end. Is there any chance you can link me to a page where I can see it?

I just added a dev site.

Thanks for that!

This will be the CSS in GP Premium 2.2.0:

.woocommerce-order-received .woocommerce-customer-details .col2-set{float:none;width:auto}
.woocommerce-order-received .woocommerce-customer-details .col2-set .col-1{margin-bottom:1.5em}