diff --git a/react/components/description-section/index.tsx b/react/components/description-section/index.tsx index 2d5d5af..b2f5bfb 100644 --- a/react/components/description-section/index.tsx +++ b/react/components/description-section/index.tsx @@ -12,7 +12,9 @@ export const DescriptionSection: FC = () => { return (
{descriptionProduct}
diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css index 8fada6f..8e7c700 100644 --- a/react/components/description-section/styles.css +++ b/react/components/description-section/styles.css @@ -1,12 +1,19 @@ .wrapperImageAndDescription{ - display: flex; + display: grid; gap: 32px; + grid-template-columns: 47.591% 1fr; + margin-left: 32px; +} + +.containerImageProductDescriptionSection{ + width: 100%; + height: 100%; + display: flex; } .imageProductDescriptionSection{ - margin-left: 32px; - width: 632px; - height: 632px; + width: 100%; + height: 100%; } .descriptionSectionTitle{ @@ -14,6 +21,10 @@ font-size: 24px; line-height: 32px; color: #575757; + + height: 40px; + margin: 0; + margin-bottom: 8px; } .descriptionSectionParagraph{ @@ -22,4 +33,20 @@ line-height: 22px; color: #929292; + margin: 0; +} + +@media screen and (max-width: 1024px) { + .wrapperImageAndDescription{ + display: flex; + flex-direction: column; + margin-left: 0; + gap: 16px; + + border-bottom: 1px solid #BFBFBF; + } + + .descriptionSectionParagraph{ + margin-bottom: 16px; + } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index efe12ba..d5b0745 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -159,7 +159,8 @@ "props": { "blockClass": "container-slider-related-products-pdp", "itemsPerPage": { - "desktop": 4 + "desktop": 4, + "tablet": 3 } } }, @@ -249,13 +250,15 @@ "blockClass": "product-images-pdp", "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "showNavigationArrows": false, "displayThumbnailsArrows": false, "thumbnailsOrientation": "horizontal", "showPaginationDots": false, - "thumbnailMaxHeight": 90 + "thumbnailMaxHeight": 90, + "thumbnailVisibility": "visible" + } }, "flex-layout.col#right-col": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 0f36af1..1759793 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -53,4 +53,12 @@ } .flexRowContent--container-related-products-pdp .stretchChildrenWidth { width: 100% !important; +} + +@media screen and (max-width: 1024px) { + .flexRow--container-product-main .flexRowContent--container-product-main { + display: flex; + flex-direction: column; + padding-top: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ee1e0a2..750205b 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -21,4 +21,11 @@ line-height: 19px; text-align: right; color: rgba(146, 146, 146, 0.48); +} + +@media screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 9b4a1aa..3b35606 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -18,4 +18,10 @@ line-height: 38px; color: #575757; margin: 0; +} + +@media screen and (max-width: 1024px) { + .container--title-related-products { + margin-bottom: 24px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index da11a98..22d50d0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -254,8 +254,6 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { grid-area: frete; -} -.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { font-size: 0; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { @@ -285,4 +283,43 @@ } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { grid-area: prazo; +} + +@media screen and (max-width: 1024px) { + .productNameContainer { + margin-top: 32px; + text-align: left; + } +} +@media screen and (max-width: 768px) { + .shippingContainer { + width: 100%; + grid-template-areas: "label button" "notCep notCep"; + grid-template-columns: 83.4459% 1fr; + } + .shippingContainer :global(.vtex-address-form__postalCode) { + padding: 0; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + grid-area: label; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + padding: 0 16px; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; + } + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + top: 0; + margin-top: 8px; + } + .carouselGaleryThumbs--product-images-pdp { + display: block !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0132a3a..8f9e156 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -46,4 +46,19 @@ } .listContainer--container-list-tab-layout-pdp .listItemActive :global(.vtex-button) :global(.vtex-button__label) { color: #000000; +} + +@media screen and (max-width: 1024px) { + .listContainer--container-list-tab-layout-pdp { + flex-direction: column; + padding: 0; + gap: 16px; + margin-bottom: 16px; + } + .listContainer--container-list-tab-layout-pdp .listItem { + width: max-content; + } + .listContainer--container-list-tab-layout-pdp .listItemActive { + border: 0; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 2bbed2c..5bf7b89 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -51,3 +51,13 @@ width: 100% !important; } } + +@media screen and (max-width: 1024px) { + .flexRow--container-product-main{ + .flexRowContent--container-product-main { + display: flex; + flex-direction: column; + padding-top: 16px; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 4846395..eaadd24 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,3 +15,10 @@ color: rgba(146, 146, 146, 0.48); } } + +@media screen and (max-width: 1024px) { + .product-identifier--productReference{ + justify-content: flex-start; + margin-bottom: 24px; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 382d229..e30e484 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -12,3 +12,9 @@ margin: 0; } } + +@media screen and (max-width: 1024px) { + .container--title-related-products{ + margin-bottom: 24px; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 02a70da..8179d7b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -286,9 +286,6 @@ .shippingTableHeadDeliveryPrice{ grid-area: frete; - } - - .shippingTableHeadDeliveryPrice{ font-size: 0; &::after{ content: "FRETE"; @@ -330,3 +327,50 @@ } } } + +@media screen and (max-width: 1024px) { + .productNameContainer{ + margin-top: 32px; + text-align: left; + } +} + +@media screen and (max-width: 768px) { + .shippingContainer{ + width: 100%; + grid-template-areas: "label button" + "notCep notCep"; + grid-template-columns: 83.4459% 1fr; + + :global(.vtex-address-form__postalCode){ + padding: 0; + :global(.vtex-input){ + grid-area: label; + + :global(.vtex-input-prefix__group){ + :global(.vtex-address-form-4-x-input){ + padding: 0 16px; + &::placeholder{ + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + } + } + :global(.vtex-input__suffix){ + display: none; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL){ + top: 0; + margin-top: 8px; + } + } + } + + .carouselGaleryThumbs--product-images-pdp{ + display: block !important; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 61b0a3b..ed6b840 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -49,3 +49,20 @@ } } } + +@media screen and (max-width: 1024px) { + .listContainer--container-list-tab-layout-pdp{ + flex-direction: column; + padding: 0; + gap: 16px; + margin-bottom: 16px; + + .listItem{ + width: max-content; + } + + .listItemActive{ + border: 0; + } + } +}