feat: responsividade feita

store/blocks/pdp/product.jsonc

@@ -52,12 +52,6 @@
   },
   "flex-layout.row#product-main": {
     "props": {
-      "colGap": 7,
-      "rowGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7,
-      "paddingBottom": 7,
       "blockClass": "product-main"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@@ -86,7 +80,6 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "45%",
       "rowGap": 0
     }
   },
@@ -104,13 +97,10 @@
   "product-images": {
     "props": {
       "aspectRatio": {
-        "desktop": "auto",
+        "desktop": "auto"
-        "phone": "16:9"
       },
       "thumbnailsOrientation": "horizontal",
       "showNavigationArrows": false,
-      "showPaginationDots": false,
-      "displayThumbnailsArrows": false,
       "blockClass": "produto-carrossel"
     }
   },
@@ -224,12 +214,6 @@
   },
 
   "flex-layout.row#product-availability": {
-    "props": {
-      "colGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
-    },
     "children": [
       "flex-layout.col#stack",
       "flex-layout.col#right-col-availability"

styles/css/vtex.flex-layout.css

@@ -19,6 +19,17 @@
   margin: 0;
   padding: 0;
 }
+@media screen and (max-width: 1024px) {
+  .flexRowContent .stretchChildrenWidth {
+    width: initial;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .flexRowContent--product-main {
+    flex-direction: column;
+  }
+}
 
 .flexRowContent--identifier {
   text-align: end;
@@ -26,10 +37,21 @@
   flex-direction: column;
   align-items: end;
 }
+@media screen and (max-width: 1024px) {
+  .flexRowContent--identifier {
+    text-align: start;
+  }
+}
 
 .flexRow--product-main {
   padding: 0 40px;
 }
+@media screen and (max-width: 1024px) {
+  .flexRow--product-main .stretchChildrenWidth {
+    width: 100% !important;
+    padding-bottom: 24px;
+  }
+}
 
 .flexColChild--infos :global(.vtex-button) {
   background-color: black !important;

styles/css/vtex.product-price.css

@@ -10,3 +10,8 @@
 .listPrice {
   display: block;
 }
+
+.sellingPriceValue {
+  font-weight: bold;
+  font-size: 25px;
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container {
+  display: contents;
+}
+
 .productImagesGallerySlide--produto-carrossel {
   width: 100% !important;
 }
@@ -30,6 +34,12 @@
   text-align: right;
   color: #575757;
 }
+@media screen and (max-width: 1024px) {
+  .productNameContainer--quickview {
+    text-align: left;
+    padding-bottom: 8px;
+  }
+}
 
 .skuSelectorContainer {
   display: flex;
@@ -89,11 +99,30 @@
 }
 
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
-  color: #000;
   position: absolute;
-  right: 32px;
+  right: 0px;
   top: 25px;
 }
+@media screen and (max-width: 1120px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    right: -20px;
+  }
+}
+@media screen and (max-width: 1100px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    right: -30px;
+  }
+}
+@media screen and (max-width: 1035px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    right: -35px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    right: 0px;
+  }
+}
 
 .shareContainer {
   display: none;
@@ -143,10 +172,20 @@
   width: 50%;
   margin-left: 16px;
 }
+@media screen and (max-width: 1024px) {
+  .productDescriptionContainer {
+    width: 100%;
+  }
+}
 
 .carouselGaleryThumbs {
   height: 200px;
 }
+@media screen and (max-width: 1024px) {
+  .carouselGaleryThumbs {
+    display: block;
+  }
+}
 
 .carouselGaleryThumbs .productImagesThumb {
   margin: 0px 10px;
@@ -238,6 +277,11 @@
 .content--description-imagem {
   width: 45%;
 }
+@media screen and (max-width: 1024px) {
+  .content--description-imagem {
+    width: 100%;
+  }
+}
 
 .newsletter {
   background: #000;
@@ -285,6 +329,12 @@
 .newsletter .inputGroup {
   width: 774px;
 }
+@media screen and (max-width: 1024px) {
+  .newsletter .inputGroup {
+    display: flex;
+    width: 100%;
+  }
+}
 
 .newsletter .inputGroup :global(.vtex-input-prefix__group) {
   border: none;

styles/css/vtex.tab-layout.css

@@ -17,23 +17,51 @@
   justify-content: space-around;
   border-bottom: 1px solid #BFBFBF;
 }
+@media screen and (max-width: 1024px) {
+  .listContainer {
+    flex-direction: column;
+    align-content: baseline;
+    border-bottom: none;
+  }
+}
 
 .listItem {
   margin: 0;
   padding: 0;
 }
+@media screen and (max-width: 1024px) {
+  .listItem {
+    width: 100%;
+  }
+}
 .listItem :global(.vtex-button) {
   border-radius: 0;
   background-color: #FFFFFF;
   color: #BFBFBF;
 }
+@media screen and (max-width: 1024px) {
+  .listItem :global(.vtex-button) {
+    display: flex;
+    width: 100%;
+  }
+}
 
 .listItemActive :global(.vtex-button) {
   border: 0;
   border-bottom: 1px solid #000000 !important;
 }
+@media screen and (max-width: 1024px) {
+  .listItemActive :global(.vtex-button) {
+    border-bottom: none !important;
+  }
+}
 
 .contentItem {
   display: flex;
   margin-bottom: 16px;
 }
+@media screen and (max-width: 1024px) {
+  .contentItem {
+    flex-direction: column;
+  }
+}

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

@@ -10,18 +10,42 @@
 .flexRowContent{
   margin: 0;
   padding: 0;
+
+
+  .stretchChildrenWidth{
+    @media screen and (max-width: 1024px) {
+      width: initial;
+    }
+  }
 }
 
+.flexRowContent--product-main{
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+
 .flexRowContent--identifier{
   text-align: end;
   display: flex;
   flex-direction: column;
   align-items: end;
 
+  @media screen and (max-width: 1024px) {
+    text-align: start;
+  }
 }
 
 .flexRow--product-main{
   padding: 0 40px;
+
+  .stretchChildrenWidth{
+    @media screen and (max-width: 1024px) {
+      width: 100% !important;
+      padding-bottom: 24px;
+    }
+  }
 }
 
 .flexColChild--infos :global(.vtex-button){

styles/sass/pages/product/vtex.product-price.scss

@@ -1,3 +1,10 @@
 .listPrice {
   display: block;
 }
+
+
+.sellingPriceValue{
+  font-weight: bold;
+  font-size: 25px;
+}
+

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

@@ -1,3 +1,7 @@
+.container{
+  display: contents;
+}
+
 .productImagesGallerySlide--produto-carrossel{
   width: 100% !important;
 }
@@ -20,6 +24,12 @@
   line-height: 34px;
   text-align: right;
   color: #575757;
+  @media screen and (max-width: 1024px) {
+    text-align: left;
+    padding-bottom: 8px;
+  }
+
+
 }
 
 .skuSelectorContainer {
@@ -73,10 +83,21 @@
   width: 280px;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
-  color: #000;
   position: absolute;
-  right: 32px;
+  right: 0px;
   top: 25px;
+  @media screen and (max-width: 1120px) {
+    right: -20px;
+  }
+  @media screen and (max-width: 1100px) {
+    right: -30px;
+  }
+  @media screen and (max-width: 1035px) {
+    right: -35px;
+  }
+  @media screen and (max-width: 1024px) {
+    right: 0px;
+  }
 }
 
 .shareContainer {
@@ -120,10 +141,18 @@
 .productDescriptionContainer {
   width: 50%;
   margin-left: 16px;
+
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
 }
 
 .carouselGaleryThumbs {
   height: 200px;
+  @media screen and (max-width: 1024px) {
+    display: block;
+  }
+
 }
 .carouselGaleryThumbs .productImagesThumb {
   margin: 0px 10px;
@@ -210,6 +239,10 @@
 
 .content--description-imagem{
   width: 45%;
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
+
 }
 
 .newsletter {
@@ -252,6 +285,10 @@
 }
 .newsletter .inputGroup {
   width: 774px;
+  @media screen and (max-width: 1024px) {
+    display: flex;
+    width: 100%;
+  }
 }
 .newsletter .inputGroup :global(.vtex-input-prefix__group) {
   border: none;

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

@@ -9,28 +9,48 @@
   margin-bottom: 32px;
   justify-content: space-around;
   border-bottom: 1px solid #BFBFBF;
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    align-content: baseline;
+    border-bottom: none;
+  }
 }
 
 .listItem{
   margin: 0;
   padding: 0;
+  @media screen and (max-width: 1024px) {
+    width: 100%;
+  }
+
   :global(.vtex-button){
     border-radius: 0;
     background-color: #FFFFFF;
     color: #BFBFBF;
+    @media screen and (max-width: 1024px) {
+      display: flex;
+      width: 100%;
+    }
+
   }
 }
 
 .listItemActive :global(.vtex-button) {
     border: 0;
     border-bottom: 1px solid #000000 !important;
-
+    @media screen and (max-width: 1024px) {
+      border-bottom: none !important;
+    }
   }
 
 
 .contentItem{
   display: flex;
   margin-bottom: 16px;
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+  }
 }