diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index f1004bc..7ddc590 100644
--- a/react/components/Html/styles.css
+++ b/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;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 98c95e7..4c889a6 100644
--- a/styles/css/vtex.store-components.css
+++ b/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;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index c6007ff..4b2663d 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/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;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index c5bd2de..06e105c 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/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;
+ }
}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 3f25a22..ca01323 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/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;