feat: adiciona responsividade imagens tablet

react/components/Html/styles.css

@@ -12,10 +12,18 @@
   width: 99.432%;
 }
 
+[class*="description-container"] {
+  display: flex;
+}
+
 @media only screen and (max-width: 1024px) {
   [class*="html--buy-button"] :global(.vtex-button) {
     width: 100%;
   }
+
+  [class*="description-container"] {
+    flex-direction: column;
+  }
 }
 
 @media only screen and (max-width: 768px) {

store/blocks/pdp/product.jsonc

@@ -4,7 +4,7 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "tab-layout#product",
-      // "flex-layout.row#description",
+      // "html#description",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
       // "shelf.relatedProducts",
@@ -217,7 +217,7 @@
       "tabId": "product1",
       "blockClass": "content-render"
     },
-    "children": ["flex-layout.row#description"]
+    "children": ["html#description"]
   },
 
   "tab-content.item#product2": {
@@ -225,7 +225,7 @@
       "tabId": "product2",
       "blockClass": "content-render"
     },
-    "children": ["flex-layout.row#description"]
+    "children": ["html#description"]
   },
 
   "tab-content.item#product3": {
@@ -233,7 +233,7 @@
       "tabId": "product3",
       "blockClass": "content-render"
     },
-    "children": ["flex-layout.row#description"]
+    "children": ["html#description"]
   },
 
   "tab-content.item#product4": {
@@ -241,7 +241,7 @@
       "tabId": "product4",
       "blockClass": "content-render"
     },
-    "children": ["flex-layout.row#description"]
+    "children": ["html#description"]
   },
 
   "tab-content.item#product5": {
@@ -249,15 +249,15 @@
       "tabId": "product5",
       "blockClass": "content-render"
     },
-    "children": ["flex-layout.row#description"]
+    "children": ["html#description"]
   },
 
-  "flex-layout.col#imageDescriptionContainer": {
+  // "html#imageDescriptionContainer": {
-    "props": {
+  //   "props": {
-      "blockClass": "image-description"
+  //     "blockClass": "image-description"
-    },
+  //   },
-    "children": ["product-images#imageDescription"]
+  //   "children": ["product-images#imageDescription"]
-  },
+  // },
 
   "product-images#imageDescription": {
     "props": {
@@ -267,12 +267,11 @@
     }
   },
 
-  "flex-layout.row#description": {
+  "html#description": {
     "props": {
-      "marginBottom": 7,
+      "blockClass": "description-container"
-      "preventHorizontalStretch": true
     },
-    "children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
+    "children": ["product-images#imageDescription", "product-description"]
   },
 
   // "flex-layout.row#quantity-buy-button": {

styles/css/vtex.store-components.css

@@ -306,12 +306,18 @@
 :global(.vtex-address-form__field--small) {
   padding-bottom: 16px;
 }
+@media only screen and (max-width: 767px) {
+  :global(.vtex-address-form__field--small) {
+    flex-direction: column;
+  }
+}
 
 .shippingTable {
   display: flex;
   flex-direction: column;
   border: none;
   margin-top: 0;
+  padding: 0;
 }
 .shippingTable .shippingTableHead {
   display: block;
@@ -325,7 +331,6 @@
   font-size: 14px;
   line-height: 19px;
   text-transform: uppercase;
-  padding-right: 112px;
   color: #202020;
 }
 @media only screen and (min-width: 1920px) {
@@ -358,16 +363,19 @@
 .shippingTable .shippingTableCellDeliveryName {
   width: 23.9263%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 .shippingTable .shippingTableHeadDeliveryEstimate,
 .shippingTable .shippingTableCellDeliveryEstimate {
   width: 41.7177%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 .shippingTable .shippingTableCellDeliveryPrice,
 .shippingTable .shippingTableHeadDeliveryPrice {
   width: 14.7239%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 
 .shippingTableBody .shippingtableRow {
@@ -454,6 +462,15 @@
   color: #fff;
 }
 
+.productDescriptionContainer {
+  width: 100%;
+  padding-left: 32px;
+}
+@media only screen and (max-width: 1025px) {
+  .productDescriptionContainer {
+    padding-left: 0;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -494,6 +511,23 @@
   }
 }
 
+:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+  max-width: 632px;
+  width: 100%;
+  height: 632px;
+}
+@media only screen and (max-width: 1025px) {
+  :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+    max-width: unset;
+    height: 944px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+    height: unset;
+  }
+}
+
 .newsletter {
   display: flex;
   align-items: flex-end;

styles/css/vtex.tab-layout.css

@@ -30,6 +30,23 @@
     line-height: 32px;
   }
 }
+.container--structure :global(.vtex-store-components-3-x-productImageTag) {
+  width: 100% !important;
+  max-height: 632px !important;
+  max-width: 632px !important;
+}
+@media only screen and (max-width: 1025px) {
+  .container--structure :global(.vtex-store-components-3-x-productImageTag) {
+    max-width: unset !important;
+    max-height: 944px !important;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .container--structure :global(.vtex-store-components-3-x-productImageTag) {
+    max-width: unset !important;
+    max-height: unset !important;
+  }
+}
 
 .contentContainer {
   padding: 0 32px;

styles/sass/pages/product/vtex.store-components.scss

@@ -356,6 +356,10 @@
 
 :global(.vtex-address-form__field--small) {
   padding-bottom: 16px;
+
+  @include mq(sm, max) {
+    flex-direction: column;
+  }
 }
 
 // ENTREGA
@@ -365,6 +369,7 @@
   flex-direction: column;
   border: none;
   margin-top: 0;
+  padding: 0;
 
   .shippingTableHead {
     display: block;
@@ -379,7 +384,6 @@
       font-size: 14px;
       line-height: 19px;
       text-transform: uppercase;
-      padding-right: 112px;
 
       color: $black-100;
 
@@ -422,18 +426,21 @@
 .shippingTableCellDeliveryName {
   width: 23.9263%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 
 .shippingTableHeadDeliveryEstimate,
 .shippingTableCellDeliveryEstimate {
   width: 41.7177%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 
 .shippingTableCellDeliveryPrice,
 .shippingTableHeadDeliveryPrice {
   width: 14.7239%;
   padding: 0 0 15px 0;
+  text-align: initial;
 }
 }
 
@@ -548,6 +555,13 @@
 
 // DESCRIÇÃO
 .productDescriptionContainer {
+  width: 100%;
+  padding-left: 32px;
+
+  @include mq(md, max) {
+    padding-left: 0;
+  }
+
   .productDescriptionTitle {
     font-weight: 400;
     font-size: 24px;
@@ -586,6 +600,27 @@
       padding-bottom: 16px;
     }
   }
+
+
+  // :global(.vtex-store-components-3-x-productDescriptionContainer) {
+  //   width: 100% !important;
+  //   padding-left: 32px;
+  // }
+}
+
+:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+  max-width: 632px;
+  width: 100%;
+  height: 632px;
+
+  @include mq(md, max) {
+    max-width: unset;
+    height: 944px;
+  }
+
+  @include mq(sm, max) {
+    height: unset;
+  }
 }
 
 // NEWSLETTER

styles/sass/pages/product/vtex.tab-layout.scss

@@ -17,6 +17,22 @@
       line-height: 32px;
     }
   }
+
+  :global(.vtex-store-components-3-x-productImageTag) {
+    width: 100% !important;
+    max-height: 632px !important;
+    max-width: 632px !important;
+
+    @include mq(md, max) {
+      max-width: unset !important;
+      max-height: 944px !important;
+    }
+
+    @include mq(sm, max) {
+      max-width: unset !important;
+      max-height: unset !important;
+    }
+  }
 }
 
 .contentContainer {