react/components/Html/styles.css

@@ -168,10 +168,28 @@
   width: 100%;
   margin-left: 32px;
 }
+@media screen and (max-width: 1024px) {
+  [class*="html--description"] {
+    margin-left: 0;
+    margin-top: 16px;
+  }
+}
 
 [class*="html--product-description"] {
   display: flex;
 }
+@media screen and ((min-width: 769) and (max-width: 1024px)) {
+  [class*="html--product-description"] {
+    margin-top: 16px;
+  }
+}
+@media screen and (max-width: 768px) {
+  [class*="html--product-description"] {
+    position: relative;
+    top: 9px;
+    margin-top: 16px;
+  }
+}
 
 [class*="html--product-description"] .contentItem{
   display: flex;
@@ -187,6 +205,11 @@
   color: #BFBFBF;
   height: 38px;
 }
+@media screen and (min-width: 1920px) {
+  [class*="html--product-description"] button {
+    font-size: 24px;
+  }
+}
 [class*="html--product-description"] button:hover {
   border: transparent;
   background-color: transparent;

styles/css/vtex.store-components.css

@@ -271,6 +271,16 @@
   padding: 0;
   border: none;
 }
+@media screen and (max-width: 1024px) {
+  .shippingTable {
+    margin-top: 32px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .shippingTable {
+    padding-top: 16px;
+  }
+}
 
 .shippingTableHead {
   display: table-header-group;
@@ -304,6 +314,21 @@
   display: grid;
   grid-template-columns: 20% 15% 65%;
 }
+@media screen and (min-width: 1025px) and (max-width: 1100px) {
+  .shippingTableRow {
+    grid-template-columns: 25% 20% 65%;
+  }
+}
+@media screen and (min-width: 461px) and (max-width: 768px) {
+  .shippingTableRow {
+    grid-template-columns: 32% 25% 43%;
+  }
+}
+@media screen and (max-width: 460px) {
+  .shippingTableRow {
+    grid-template-columns: 37% 25% 38%;
+  }
+}
 
 .shippingTableCellDeliveryName,
 .shippingTableCellDeliveryName {
@@ -329,7 +354,12 @@
   display: flex;
   align-items: center;
   color: #AFAFAF;
-  padding: 0 0 15px 0;
+  padding: 0;
+}
+
+.shippingTableBody {
+  display: grid;
+  gap: 16px;
 }
 
 .shippingTableRadioBtn {
@@ -418,6 +448,17 @@
   height: 40px;
   margin-bottom: 8px;
 }
+@media screen and (min-width: 1920px) {
+  .productDescriptionTitle {
+    font-size: 32px;
+    margin-bottom: 16px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .productDescriptionTitle {
+    font-size: 20px;
+  }
+}
 
 .productDescriptionText {
   font-weight: 400;
@@ -425,6 +466,19 @@
   line-height: 22px;
   color: #929292;
 }
+@media screen and (min-width: 1920px) {
+  .productDescriptionText {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+    padding-bottom: 16px;
+  }
+}
 
 .listContainer--list-product {
   display: flex;

styles/css/vtex.tab-layout.css

@@ -10,6 +10,11 @@
 .contentItem {
   display: flex;
 }
+@media screen and (max-width: 1024px) {
+  .contentItem {
+    flex-direction: column;
+  }
+}
 
 .listContainer--list-product {
   width: 94.4444%;
@@ -28,6 +33,15 @@
     width: 92.1875%;
   }
 }
+@media screen and (max-width: 1024px) {
+  .listContainer--list-product {
+    flex-direction: column;
+    border-top: 1px solid #BFBFBF;
+    gap: 16px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
 @media screen and (max-width: 768px) {
   .listContainer--list-product {
     width: 79%;
@@ -43,6 +57,7 @@
 @media screen and (min-width: 1920px) {
   .contentContainer--content-product {
     width: 69.375%;
+    padding-top: 64px;
   }
 }
 @media screen and ((min-width: 769) and (max-width: 1024px)) {
@@ -50,6 +65,12 @@
     width: 92.1875%;
   }
 }
+@media screen and (max-width: 1024px) {
+  .contentContainer--content-product {
+    padding-top: 16px;
+    border-bottom: 1px solid #BFBFBF;
+  }
+}
 @media screen and (max-width: 768px) {
   .contentContainer--content-product {
     width: 79%;
@@ -64,6 +85,11 @@
 .listItemActive {
   border-bottom: 2px solid #000000;
 }
+@media screen and (max-width: 1024px) {
+  .listItemActive {
+    border-bottom: none;
+  }
+}
 .listItemActive :last-child {
   background-color: transparent;
   color: #000000;
@@ -73,6 +99,11 @@
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
+@media screen and (min-width: 1920px) {
+  .listItemActive :last-child {
+    font-size: 24px;
+  }
+}
 .listItemActive :last-child:hover {
   border-bottom: none;
   color: #000000;

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

@@ -280,6 +280,13 @@
   margin: 16px 0 0 0;
   padding: 0;
   border: none;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 32px;
+  }
+  @media screen and (max-width: 768px) {
+    padding-top: 16px;
+  }
 }
 
 .shippingTableHead {
@@ -314,6 +321,18 @@
 .shippingTableRow {
   display: grid;
   grid-template-columns: 20% 15% 65%;
+
+  @media screen and (min-width: 1025px) and (max-width: 1100px) {
+    grid-template-columns: 25% 20% 65%;
+  }
+
+  @media screen and (min-width: 461px) and (max-width: 768px) {
+    grid-template-columns: 32% 25% 43%;
+  }
+
+  @media screen and (max-width: 460px) {
+    grid-template-columns: 37% 25% 38%;
+  }
 }
 
 .shippingTableCellDeliveryName,
@@ -340,7 +359,12 @@
   display: flex;
   align-items: center;
   color: #AFAFAF;
-  padding: 0 0 15px 0;
+  padding: 0;
+}
+
+.shippingTableBody {
+  display: grid;
+  gap: 16px;
 }
 
 .shippingTableRadioBtn {
@@ -436,6 +460,15 @@
   color: #575757;
   height: 40px;
   margin-bottom: 8px;
+
+  @media screen and (min-width: 1920px) {
+    font-size: 32px;
+    margin-bottom: 16px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    font-size: 20px;
+  }
 }
 
 .productDescriptionText {
@@ -443,6 +476,17 @@
   font-size: 16px;
   line-height: 22px;
   color: #929292;
+
+  @media screen and (min-width: 1920px) {
+    font-size: 18px;
+    line-height: 25px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    font-size: 14px;
+    line-height: 19px;
+    padding-bottom: 16px;
+  }
 }
 
 

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

@@ -1,5 +1,9 @@
 .contentItem {
   display: flex;
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+  }
 }
 
 .listContainer--list-product{
@@ -18,6 +22,14 @@
     width: 92.1875%;
   }
 
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    border-top: 1px solid #BFBFBF;
+    gap: 16px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
   @media screen and (max-width: 768px) {
     width: 79%;
   }
@@ -32,12 +44,18 @@
 
   @media screen and (min-width: 1920px) {
     width: 69.375%;
+    padding-top: 64px;
   }
 
   @media screen and ((min-width: 769) and (max-width: 1024px)) {
     width: 92.1875%;
   }
 
+  @media screen and (max-width: 1024px) {
+    padding-top: 16px;
+    border-bottom: 1px solid #BFBFBF;
+  }
+
   @media screen and (max-width: 768px) {
     width: 79%;
   }
@@ -51,6 +69,10 @@
 .listItemActive {
   border-bottom: 2px solid #000000;
 
+  @media screen and (max-width: 1024px) {
+    border-bottom: none;
+  }
+
   :last-child {
     background-color: transparent;
     color: #000000;
@@ -60,6 +82,10 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 
+    @media screen and (min-width: 1920px) {
+      font-size: 24px;
+    }
+
     &:hover {
       border-bottom: none;
       color: #000000;