diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 944866e..56f5fff 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -12,10 +12,18 @@
width: 99.432%;
}
+[class*="description-container"] {
+ display: flex;
+}
+
@media only screen and (max-width: 1024px) {
[class*="html--buy-button"] :global(.vtex-button) {
width: 100%;
}
+
+ [class*="description-container"] {
+ flex-direction: column;
+ }
}
@media only screen and (max-width: 768px) {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index a4516b5..205725a 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -4,7 +4,7 @@
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#product",
- // "flex-layout.row#description",
+ // "html#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
@@ -217,7 +217,7 @@
"tabId": "product1",
"blockClass": "content-render"
},
- "children": ["flex-layout.row#description"]
+ "children": ["html#description"]
},
"tab-content.item#product2": {
@@ -225,7 +225,7 @@
"tabId": "product2",
"blockClass": "content-render"
},
- "children": ["flex-layout.row#description"]
+ "children": ["html#description"]
},
"tab-content.item#product3": {
@@ -233,7 +233,7 @@
"tabId": "product3",
"blockClass": "content-render"
},
- "children": ["flex-layout.row#description"]
+ "children": ["html#description"]
},
"tab-content.item#product4": {
@@ -241,7 +241,7 @@
"tabId": "product4",
"blockClass": "content-render"
},
- "children": ["flex-layout.row#description"]
+ "children": ["html#description"]
},
"tab-content.item#product5": {
@@ -249,15 +249,15 @@
"tabId": "product5",
"blockClass": "content-render"
},
- "children": ["flex-layout.row#description"]
+ "children": ["html#description"]
},
- "flex-layout.col#imageDescriptionContainer": {
- "props": {
- "blockClass": "image-description"
- },
- "children": ["product-images#imageDescription"]
- },
+ // "html#imageDescriptionContainer": {
+ // "props": {
+ // "blockClass": "image-description"
+ // },
+ // "children": ["product-images#imageDescription"]
+ // },
"product-images#imageDescription": {
"props": {
@@ -267,12 +267,11 @@
}
},
- "flex-layout.row#description": {
+ "html#description": {
"props": {
- "marginBottom": 7,
- "preventHorizontalStretch": true
+ "blockClass": "description-container"
},
- "children": ["flex-layout.col#imageDescriptionContainer", "product-description"]
+ "children": ["product-images#imageDescription", "product-description"]
},
// "flex-layout.row#quantity-buy-button": {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 35694a3..67f83b5 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -306,12 +306,18 @@
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
}
+@media only screen and (max-width: 767px) {
+ :global(.vtex-address-form__field--small) {
+ flex-direction: column;
+ }
+}
.shippingTable {
display: flex;
flex-direction: column;
border: none;
margin-top: 0;
+ padding: 0;
}
.shippingTable .shippingTableHead {
display: block;
@@ -325,7 +331,6 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
- padding-right: 112px;
color: #202020;
}
@media only screen and (min-width: 1920px) {
@@ -358,16 +363,19 @@
.shippingTable .shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
+ text-align: initial;
}
.shippingTable .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
+ text-align: initial;
}
.shippingTable .shippingTableCellDeliveryPrice,
.shippingTable .shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
+ text-align: initial;
}
.shippingTableBody .shippingtableRow {
@@ -454,6 +462,15 @@
color: #fff;
}
+.productDescriptionContainer {
+ width: 100%;
+ padding-left: 32px;
+}
+@media only screen and (max-width: 1025px) {
+ .productDescriptionContainer {
+ padding-left: 0;
+ }
+}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@@ -494,6 +511,23 @@
}
}
+:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+ max-width: 632px;
+ width: 100%;
+ height: 632px;
+}
+@media only screen and (max-width: 1025px) {
+ :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+ max-width: unset;
+ height: 944px;
+ }
+}
+@media only screen and (max-width: 767px) {
+ :global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+ height: unset;
+ }
+}
+
.newsletter {
display: flex;
align-items: flex-end;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index e86e4af..0556c5a 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -30,6 +30,23 @@
line-height: 32px;
}
}
+.container--structure :global(.vtex-store-components-3-x-productImageTag) {
+ width: 100% !important;
+ max-height: 632px !important;
+ max-width: 632px !important;
+}
+@media only screen and (max-width: 1025px) {
+ .container--structure :global(.vtex-store-components-3-x-productImageTag) {
+ max-width: unset !important;
+ max-height: 944px !important;
+ }
+}
+@media only screen and (max-width: 767px) {
+ .container--structure :global(.vtex-store-components-3-x-productImageTag) {
+ max-width: unset !important;
+ max-height: unset !important;
+ }
+}
.contentContainer {
padding: 0 32px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 61efec1..a8a2ce7 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -356,6 +356,10 @@
:global(.vtex-address-form__field--small) {
padding-bottom: 16px;
+
+ @include mq(sm, max) {
+ flex-direction: column;
+ }
}
// ENTREGA
@@ -365,6 +369,7 @@
flex-direction: column;
border: none;
margin-top: 0;
+ padding: 0;
.shippingTableHead {
display: block;
@@ -379,7 +384,6 @@
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
- padding-right: 112px;
color: $black-100;
@@ -422,18 +426,21 @@
.shippingTableCellDeliveryName {
width: 23.9263%;
padding: 0 0 15px 0;
+ text-align: initial;
}
.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
width: 41.7177%;
padding: 0 0 15px 0;
+ text-align: initial;
}
.shippingTableCellDeliveryPrice,
.shippingTableHeadDeliveryPrice {
width: 14.7239%;
padding: 0 0 15px 0;
+ text-align: initial;
}
}
@@ -548,6 +555,13 @@
// DESCRIÇÃO
.productDescriptionContainer {
+ width: 100%;
+ padding-left: 32px;
+
+ @include mq(md, max) {
+ padding-left: 0;
+ }
+
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@@ -586,6 +600,27 @@
padding-bottom: 16px;
}
}
+
+
+ // :global(.vtex-store-components-3-x-productDescriptionContainer) {
+ // width: 100% !important;
+ // padding-left: 32px;
+ // }
+}
+
+:global(.vtex-store-components-3-x-productImagesContainer--first-image) {
+ max-width: 632px;
+ width: 100%;
+ height: 632px;
+
+ @include mq(md, max) {
+ max-width: unset;
+ height: 944px;
+ }
+
+ @include mq(sm, max) {
+ height: unset;
+ }
}
// NEWSLETTER
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index e641240..8f43707 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -17,6 +17,22 @@
line-height: 32px;
}
}
+
+ :global(.vtex-store-components-3-x-productImageTag) {
+ width: 100% !important;
+ max-height: 632px !important;
+ max-width: 632px !important;
+
+ @include mq(md, max) {
+ max-width: unset !important;
+ max-height: 944px !important;
+ }
+
+ @include mq(sm, max) {
+ max-width: unset !important;
+ max-height: unset !important;
+ }
+ }
}
.contentContainer {