diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss index f5f113d1cfb..63380eda4fa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/summary/style.scss @@ -26,7 +26,14 @@ } @media only screen and (max-width: 480px) { - flex-direction: column; + li { + width: 100%; + + > .wc-block-order-confirmation-summary-list-item__key, + > .wc-block-order-confirmation-summary-list-item__value { + display: inline; + } + } } } .woocommerce-verify-email { diff --git a/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 new file mode 100644 index 00000000000..e1a82f3272d --- /dev/null +++ b/plugins/woocommerce/changelog/update-mobile-order-summary-styling-50635 @@ -0,0 +1,4 @@ +Significance: minor +Type: tweak + +On mobile, style order confirmation page details side by side diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php index e36c1d77f74..3560292ab02 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Summary.php @@ -29,11 +29,11 @@ class Summary extends AbstractOrderConfirmationBlock { } $content = '