diff --git a/modules/ppcp-axo-block/resources/css/gateway.scss b/modules/ppcp-axo-block/resources/css/gateway.scss index 072b90d83..24987cf52 100644 --- a/modules/ppcp-axo-block/resources/css/gateway.scss +++ b/modules/ppcp-axo-block/resources/css/gateway.scss @@ -138,11 +138,12 @@ $fast-transition-duration: 0.5s; .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input { display: grid; grid-template-areas: - "input button" - "watermark watermark" - "error error"; - grid-template-columns: 1fr auto; - gap: 6px 8px; + "input" + "button" + "watermark" + "error"; + grid-template-columns: 1fr; + gap: 6px; align-items: start; input[type="email"] { @@ -152,16 +153,17 @@ $fast-transition-duration: 0.5s; } #email { - align-self: center; + align-self: stretch; } // 4.5 Email Submit Button .wc-block-axo-email-submit-button-container { grid-area: button; - align-self: center; + align-self: stretch; .wc-block-components-button { white-space: nowrap; + width: 100%; } } @@ -177,6 +179,29 @@ $fast-transition-duration: 0.5s; width: 100%; margin-top: 4px; } + + @media (min-width: 783px) { + .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input { + grid-template-areas: + "input button" + "watermark watermark" + "error error"; + grid-template-columns: 1fr auto; + gap: 6px 8px; + } + + #email { + align-self: center; + } + + .wc-block-axo-email-submit-button-container { + align-self: center; + + .wc-block-components-button { + width: auto; + } + } + } } // 5. Shipping/Card Change Link