diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index fdf9ae3..b9a9ba5 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -246,6 +246,13 @@ .form { width: max-content; } +@media screen and (max-width: 1024px) { + .form { + width: 100%; + display: flex; + justify-content: center; + } +} .form .content { width: 65.532%; height: 108px; @@ -255,6 +262,11 @@ grid-template-rows: 1fr 1fr; gap: 8px; } +@media screen and (max-width: 1024px) { + .form .content { + width: 100%; + } +} .form .content .inputName, .form .content .inputEmail { width: 100%; height: 40px; @@ -262,6 +274,11 @@ margin-right: 0; margin-bottom: 7px; } +@media screen and (max-width: 1024px) { + .form .content .inputName, .form .content .inputEmail { + min-width: 0; + } +} .form .submit { width: 100%; justify-content: center; @@ -269,6 +286,7 @@ grid-row: 2; } .form .submit :global(.vtex-button) { + display: block; width: 100%; background: #000000; width: 308px; @@ -298,21 +316,41 @@ .shippingContainer { display: grid; - grid-template-columns: 1fr auto 1fr; position: relative; align-items: end; + width: max-content; +} +@media screen and (max-width: 1024px) { + .shippingContainer { + max-width: 100%; + min-width: 93.665%; + grid-template-columns: 1fr auto; + grid-template-rows: 1fr 1fr; + height: 100px; + } } .shippingContainer :global(.vtex-address-form__postalCode) { display: grid; grid-column: 1/2; padding: 0; + min-width: 230px; +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + min-width: 100%; + max-width: 100%; + width: 100%; + grid-row: 1; + } } .shippingContainer :global(.vtex-button) { display: block; grid-column: 2/3; background: #000000; - width: max-content; + width: 100%; height: max-content; + border: 0; + border-radius: 0; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { font-size: 0; @@ -336,7 +374,9 @@ } .shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) { border: 1px solid #CCCCCC; - height: max-content; + height: 49px; + max-width: 100%; + border-radius: 0; } .shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { color: #AFAFAF; @@ -349,6 +389,7 @@ } .shippingContainer :global(.vtex-input) :global(.vtex-input__label) { font-size: 0; + width: max-content; } .shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { content: "CALCULAR FRETE:"; @@ -360,10 +401,27 @@ color: #929292; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + width: max-content; position: absolute; grid-column: 3/4; right: 0; bottom: 25%; left: 0; margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + margin-left: 0; + grid-column: 1/4; + left: auto; + bottom: 0; + } } \ 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 0673bfe..270a411 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -218,6 +218,11 @@ .form{ width: max-content; + @media screen and (max-width: 1024px){ + width: 100%; + display: flex; + justify-content: center; + } .content{ width: 65.532%; height: 108px; @@ -226,12 +231,18 @@ grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; + @media screen and (max-width: 1024px){ + width: 100%; + } .inputName,.inputEmail{ width: 100%; height: 40px; min-width: 150px; margin-right: 0; margin-bottom: 7px; + @media screen and (max-width: 1024px){ + min-width: 0; + } } } .submit{ @@ -240,6 +251,7 @@ grid-column: span 2; grid-row: 2; :global(.vtex-button){ + display: block; width: 100%; background: #000000; width: 308px; @@ -270,20 +282,36 @@ } .shippingContainer{ display: grid; - grid-template-columns: 1fr auto 1fr; position: relative; align-items: end; + width: max-content; + @media screen and (max-width: 1024px){ + max-width: 100%; + min-width: 93.665%; + grid-template-columns: 1fr auto; + grid-template-rows: 1fr 1fr; + height: 100px; + } :global(.vtex-address-form__postalCode ){ display: grid; grid-column: 1 / 2; padding: 0; + min-width: 230px; + @media screen and (max-width: 1024px){ + min-width: 100%; + max-width: 100%; + width: 100%; + grid-row: 1; + } } :global(.vtex-button){ display: block; grid-column: 2 / 3; background: #000000; - width: max-content; + width: 100%; height: max-content; + border: 0; + border-radius: 0; :global(.vtex-button__label){ font-size: 0; padding: 0; @@ -306,7 +334,9 @@ grid-column: 1 / 2; :global(.vtex-input-prefix__group){ border: 1px solid #CCCCCC; - height: max-content; + height: 49px; + max-width: 100%; + border-radius: 0; :global(.vtex-address-form-4-x-input){ color: #AFAFAF; font-family: 'Open Sans',sans-serif; @@ -319,6 +349,7 @@ } :global(.vtex-input__label){ font-size: 0; + width:max-content; &::after{ content: "CALCULAR FRETE:"; font-family: 'Open Sans',sans-serif; @@ -331,12 +362,27 @@ } } :global(.vtex-address-form__postalCode-forgottenURL){ + width: max-content; position: absolute; grid-column: 3 / 4; right: 0; bottom: 25%; left: 0; margin-left: 32px; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line:underline; + @media screen and (max-width: 1024px){ + margin-left: 0; + grid-column:1 / 4; + left: auto; + bottom: 0; + } } }