Modern Checkout Template order review layout issue – CSS fix?

Hello @decalvibes,

Greetings for the day!

I tried to see the issue on the checkout page however I’m currently unable to see the issue when moving to the checkout page after adding the product to the cart.

Please see this reference screenshot: https://bsf.d.pr/i/Sfcvt1

Looking forward to hearing from you.

Best Regards,

Hi @aamiribsf

thank you for your quick reply!
I fixed the issue by myself in the meantime. The following coding has corrected the layout issue:

/* Width Customer Information Checkout 50% - Desktop */
@media only screen and (min-width: 1025px) {
.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper {
width: 50%;
}
}

/* Order Review Max-Width 40px */
.wcf-embed-checkout-form table.shop_table thead tr th:nth-child( 2 ), .wcf-embed-checkout-form table.shop_table tbody tr td:nth-child( 2 ), .wcf-embed-checkout-form table.shop_table tfoot tr td:nth-child( 2 ) {
max-width: 40px;
}

/* Order Review right-aligned and 50% width - Desktop */
@media only screen and (min-width: 1025px) {
.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce-checkout .wcf-order-wrap {
float: right;
width: 50%;
}
}

/* Shippingmethod and -costs adjusted to column width */
.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table .woocommerce-shipping-methods li {
white-space: inherit;
word-wrap: break-word;
}

/* With of Shippingmethod and -costs smaller */
.wcf-embed-checkout-form table.shop_table thead tr th:nth-child( 1 ), .wcf-embed-checkout-form table.shop_table tbody tr td:nth-child( 1 ), .wcf-embed-checkout-form table.shop_table tfoot tr th:nth-child( 1 ) {
width: 51%;
}

Maybe you could implement such coding to adjust the layout. Thank you for your efforts!
Br, Alex

Hello @decalvibes,

Thanks for sharing this information.

If you have more questions, please don’t hesitate to raise a new thread!?

Have a great day ahead ??