feat: Responsividade tablet finalizada

react/components/description-section/index.tsx

@@ -12,7 +12,9 @@ export const DescriptionSection: FC = () => {
 
   return (
       <div className={styles.wrapperImageAndDescription}>
-        <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
+        <div className={styles.containerImageProductDescriptionSection}>
+          <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
+        </div>
         <div className={styles.wrapperDescriptionSection}>
           <h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
           <p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>

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: 100%;
-  width: 632px;
+  height: 100%;
-  height: 632px;
 }
 
 .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;
+  }
 }

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": {

styles/css/vtex.flex-layout.css

@@ -54,3 +54,11 @@
 .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;
+  }
+}

styles/css/vtex.product-identifier.css

@@ -22,3 +22,10 @@
   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;
+  }
+}

styles/css/vtex.rich-text.css

@@ -19,3 +19,9 @@
   color: #575757;
   margin: 0;
 }
+
+@media screen and (max-width: 1024px) {
+  .container--title-related-products {
+    margin-bottom: 24px;
+  }
+}

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 {
@@ -286,3 +284,42 @@
 .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;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -47,3 +47,18 @@
 .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;
+  }
+}

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;
+     }
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+    }
+  }
+}