diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 1c696b6..601b3af 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,13 +1,6 @@
/* [class*=html--pdp-breadcrumb]{
background: blue;
} */
-/* .html {
- background-color: red;
-}
-
-.html--pdp-breadcrumb {
- background-color: green;
-} */
.html--pdp-section_descriptions{
display: flex;
flex-direction: column;
@@ -20,6 +13,15 @@
.html--pdp-descriptions{
display: flex;
}
+.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
+ width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
+ max-width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+ padding-left: 28px;
+}
.html--pdp-departamens{
background: transparent;
margin-top: 32px;
@@ -63,6 +65,9 @@
justify-content: end;
padding: 0;
}
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+ padding-left: 0px;
+ }
.html--pdp-departamens div ul li :global(button.open){
border-bottom: none;
}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 7dc3fbc..9fa6dfb 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,19 +1,15 @@
{
"store.product": {
"children": [
- "html#breadcrumb",
- "condition-layout.product#availability",
- "html#departaments",
- "flex-layout.row#specifications-title",
- "html#carousel"
+ "html#departaments"
]
},
- "html#carousel":{
- "children":["flex-layout.row#shelfpdp"]
+ "html#carousel": {
+ "children": ["flex-layout.row#shelfpdp"]
},
"flex-layout.row#shelfpdp": {
- "props":{
- "blockClass":"pdp-carrousel"
+ "props": {
+ "blockClass": "pdp-carrousel"
},
"children": ["list-context.product-list#pdp"]
},
@@ -39,15 +35,19 @@
"product-summary.shelf#Pdp": {
"children": [
- "stack-layout#prodsum",
+ "stack-layout#pdp",
"product-summary-name",
- "product-summary-space",
"product-list-price#summary",
"product-installments#summary",
"flex-layout.row#selling-price-savings"
]
},
-
+ "stack-layout#pdp": {
+ "children": [
+ "product-summary-image#shelf",
+ "modal-trigger#quickview" // Check quickview.jsonc
+ ]
+ },
"html#breadcrumb": {
"props": {
"tag": "section",
@@ -149,6 +149,7 @@
},
"children": ["html#Sections", "html#description"]
},
+
"html#description": {
"props": {
"tag": "div",
@@ -167,6 +168,7 @@
"htmlId": "teste"
}
},
+
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@@ -185,6 +187,7 @@
},
"product-images#description": {
"props": {
+ "maxHeight":872,
"testid": "product-images",
"aspectRatio": {
"desktop": "1:1",
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8b90328..c913d5c 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -127,7 +127,7 @@
background: white;
margin-right: 1em;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb {
width: 30% !important;
}
@@ -142,7 +142,7 @@
border-radius: 8px;
min-height: 5.54em;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em;
}
@@ -150,4 +150,48 @@
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px;
+}
+
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer .productImageTag {
+ min-width: 296px;
+ }
+}
+.productDescriptionContainer .productDescriptionTitle {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: #575757;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 32px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 20px !important;
+ }
+}
+.productDescriptionContainer .content {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .content {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer .content {
+ font-size: 14px !important;
+ line-height: 19px !important;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 07ec51f..90e4347 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -120,7 +120,7 @@
width: max-content !important;
background:white;
margin-right: 1em;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
width: 30% !important;
}
.figure{
@@ -130,7 +130,7 @@
.thumbImg{
border-radius: 8px;
min-height: 5.54em;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
min-height: 4.9em;
}
}
@@ -142,4 +142,41 @@
}
}
}
+.productDescriptionContainer{
+ .productImageTag{
+ @media screen and (max-width: 1024px){
+ min-width: 296px;
+ }
+ }
+ .productDescriptionTitle{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: #575757;
+ @media screen and (min-width: 1920px){
+ font-size: 32px;
+ }
+ @media screen and (max-width: 1024px){
+ font-size: 20px !important;
+ }
+ }
+ .content{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ 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 !important;
+ line-height: 19px !important;
+ }
+ }
+}