diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 61d7e2e..8644f12 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -18,7 +18,7 @@ [class*="html--buy-button"] { display: flex; gap: 10px; - margin-bottom: 5px; + margin: 6px 0 5px 0; } [class*="html--buy-button"] :global(.vtex-button) { @@ -71,10 +71,6 @@ width: 149.91px; } - [class*="html--buy-button"] { - margin-bottom: 16px; - } - [class*="html--descriptionImage"] { width: 100%; } @@ -88,6 +84,7 @@ [class*="html--buy-button"] { flex-direction: column; gap: 0; + margin-bottom: 16px; } [class*="html--product-quantity"] { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 065f889..a99f420 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -553,4 +553,18 @@ .shippingTable { margin-top: 32px; } +} +@media (max-width: 463px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: 100%; + } + .shippingContainer :global(.vtex-button) { + left: unset; + right: 0; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: unset; + right: 0; + top: 95%; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index dc47d50..34a2c03 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -580,3 +580,20 @@ margin-top: 32px; } } + +@media (max-width: 463px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: 100%; + } + + .shippingContainer :global(.vtex-button) { + left: unset; + right: 0; + } + + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: unset; + right: 0; + top: 95%; + } +}