ajustes na imagem do produto

react/components/Html/style.css

@@ -113,3 +113,18 @@
   border-bottom: 4px solid black;
   color: black;
 }
+
+@media screen and (max-width: 1024px) {
+
+  [class*="vtex-tab-layout-0-x-listItem"] button {
+    border: none;
+    width: 100%;
+    display: flex;
+  }
+
+  [class*="vtex-tab-layout-0-x-listItemActive"] button {
+    width: 100%;
+    display: flex;
+    border: none;
+  }
+}

styles/css/vtex.flex-layout.css

@@ -26,12 +26,14 @@
   position: relative;
 }
 
-.flexRow--btn-product {
+@media screen and (min-width: 769px) {
+  .flexRow--btn-product {
     width: 100%;
     max-width: 400px;
     position: absolute;
     top: 366px;
     left: 158px;
+  }
 }
 .flexRow--btn-product :global(.vtex-button) {
   background-color: black;

styles/css/vtex.store-components.css

@@ -249,6 +249,11 @@
   margin-right: 16px;
   width: 50%;
 }
+@media screen and (max-width: 1024px) {
+  .content--imagem-descricao {
+    width: 100%;
+  }
+}
 
 .productDescriptionContainer {
   width: 50%;
@@ -353,3 +358,9 @@
 .sellingPrice {
   font-weight: bolder;
 }
+
+@media screen and (max-width: 1024px) {
+  .productImageTag--imagem-descricao--main {
+    max-height: 1100px !important;
+  }
+}

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

@@ -17,11 +17,13 @@
 }
 
 .flexRow--btn-product {
+  @media screen and (min-width: 769px) {
     width: 100%;
     max-width: 400px;
     position: absolute;
     top: 366px;
     left: 158px;
+  }
 
   :global(.vtex-button) {
     background-color: black;

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

@@ -278,6 +278,10 @@
 .content--imagem-descricao {
   margin-right: 16px;
   width: 50%;
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
 }
 
 .productDescriptionContainer {
@@ -398,3 +402,9 @@
 .sellingPrice {
   font-weight: bolder;
 }
+
+.productImageTag--imagem-descricao--main {
+  @media screen and (max-width: 1024px) {
+    max-height: 1100px !important;
+  }
+}