fix: ajusta o width do container da imagem

react/components/Html/readme.md

@@ -46,7 +46,7 @@ Basicamente esse componente
     <div class="vtex-flex-layout-0-x-flexRow">
         <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
             <div class="vtex-flex-layout-0-x-flexRowContent pr7">
-                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
+                <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 44%;">
                     {children}
                 </div>
             </div>

react/components/Html/styles.css

@@ -1,4 +1,9 @@
 [dataid*="product-images"] {
-  display: flex;
-  justify-content: left;
+  margin-left: 40px;
+  width: 80%;
+}
+
+[class*="productImageTag--main"] {
+  max-width: 80.25%;
+  object-fit: none;
 }

store/blocks/pdp/product.jsonc

@@ -45,8 +45,6 @@
   },
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
-      "rowGap": 7,
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
@@ -78,7 +76,6 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
       "rowGap": 0
     }
   },
@@ -88,6 +85,7 @@
   },
   "product-images": {
     "props": {
+      "contentType": "images",
       "showNavigationArrows": false,
       "showPaginationDots": false,
       "thumbnailsOrientation": "horizontal",

styles/css/vtex.add-to-cart-button.css

@@ -1,39 +1,9 @@
-.add-to-cart-button {
-  background-color: black;
-  color: white;
-}
-
-.buttonText {
-  visibility: hidden;
-}
-
-.__label {
-  padding: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.buttonText::after {
-  width: 398px;
-  height: 25px;
-  content: "Adicionar à sacola";
-  visibility: visible;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
-  color: #ffffff;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.buttonDataContainer {
-  position: relative;
-}
-
-.button-add {
-  background-color: black;
-}
-
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */

styles/css/vtex.condition-layout.css

@@ -1,5 +0,0 @@
-.stretchChildrenWidth {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid red;
-}

styles/css/vtex.flex-layout.css

@@ -70,6 +70,10 @@
   align-items: flex-end;
 }
 
+.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex {
+  width: 40%;
+}
+
 .flexCol--orderByMobileCol {
   width: 42%;
 }
@@ -83,7 +87,6 @@
   max-height: 100%;
 }
 
-
 .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;

styles/css/vtex.store-components.css

@@ -9,17 +9,4 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
-}
-
-.productNameContainer {
-  width: 664px;
-  height: 34px;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 34px;
-  text-align: right;
-  color: #575757;
-  margin-right: 40px;
-}
+}