diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss index 5a4c67f7e64..990809e7fac 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss @@ -7,9 +7,10 @@ $border-radius: 5px; .wc-block-components-express-payment__event-buttons { list-style: none; - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); + grid-gap: 10px; + box-sizing: border-box; width: 100%; padding: 0; margin: 0; @@ -18,6 +19,7 @@ $border-radius: 5px; > li { margin: 0; + width: 100%; > img { width: 100%; @@ -25,6 +27,12 @@ $border-radius: 5px; } } } + + @include breakpoint("<782px") { + .wc-block-components-express-payment__event-buttons { + grid-template-columns: 1fr; + } + } } .wc-block-components-express-payment--checkout { @@ -85,28 +93,6 @@ $border-radius: 5px; margin-bottom: em($gap); } } - - .wc-block-components-express-payment__event-buttons { - > li { - box-sizing: border-box; - display: inline-block; - width: 50%; - } - - > li:nth-child(even) { - padding-left: $gap-smaller; - } - - > li:nth-child(odd) { - padding-right: $gap-smaller; - } - - > li:only-child { - display: block; - width: 100%; - padding: 0; - } - } } .wc-block-components-express-payment--cart {