diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index c99d5dc..a00b23b 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -38,6 +38,12 @@
display: flex;
height: 49px;
}
+@media screen and (max-width: 768px) {
+ [class*="html--qtd-btn"] {
+ flex-direction: column;
+ height: unset;
+ }
+}
[class*="html--qtd-btn"] :global(.vtex-button) {
background-color: #000000;
@@ -49,3 +55,9 @@
color: #ffffff;
border-radius: 0%;
}
+@media screen and (max-width: 768px) {
+ [class*="html--qtd-btn"] :global(.vtex-button) {
+ height: 74px;
+ padding: 0 64px;
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 817dd89..83490d9 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -68,7 +68,8 @@
"product-description": {
"props": {
"marginBottom": 7,
- "blockClass": "descricao"
+ "blockClass": "descricao",
+ "collapseContent": false
}
},
"condition-layout.product#availability": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index ef5baf9..4f88e2d 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -38,4 +38,7 @@
.flexRowContent--container-produto {
display: block;
}
+ .flexRowContent--container-produto .stretchChildrenWidth {
+ width: 100% !important;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 11ace81..1268528 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -48,6 +48,11 @@
height: 100%;
/*height: 49px;*/
}
+@media screen and (max-width: 768px) {
+ .quantitySelectorContainer--quantidade {
+ margin: 0 0 10px 0;
+ }
+}
/*.summaryContainer {
background-color: blue;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 92b9ecf..d7118c0 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -19,6 +19,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
+ display: block;
}
.thumbImg {
@@ -380,9 +381,29 @@
}
}
+.productDescriptionText--descricao {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+@media screen and (max-width: 768px) {
+ .productDescriptionText--descricao {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
+
.subscriberContainer {
position: relative;
}
+@media screen and (max-width: 1024px) {
+ .subscriberContainer .content {
+ display: flex;
+ width: 100% !important;
+ max-width: unset;
+ }
+}
.subscriberContainer .title {
font-size: 0;
margin: 0;
@@ -443,6 +464,7 @@
border: none;
border-radius: 0%;
height: 49px;
+ cursor: pointer;
}
.subscriberContainer .content .submit :global(.vtex-button__label) {
font-size: 0;
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 010903c..9e720a0 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -38,6 +38,11 @@
margin: 0;
height: 42px;
}
+@media screen and (max-width: 1024px) {
+ .listItem {
+ margin: 5px 0;
+ }
+}
.listItem :global(.vtex-button) {
background-color: transparent;
cursor: pointer;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 35fdc7d..54bdf7c 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -24,5 +24,9 @@
gap: 32px;
@media screen and (max-width: 1024px) {
display: block;
+
+ .stretchChildrenWidth {
+ width: 100% !important;
+ }
}
}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 019ef84..30e24ca 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -41,6 +41,9 @@
padding: 0;
height: 100%;
/*height: 49px;*/
+ @media screen and (max-width: 768px) {
+ margin: 0 0 10px 0;
+ }
}
/*.summaryContainer {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 41be173..98d78de 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -10,6 +10,7 @@
.carouselGaleryThumbs {
margin-top: 16px;
+ display: block;
}
.thumbImg {
@@ -413,10 +414,27 @@
line-height: 19px;
}
}
+.productDescriptionText--descricao {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: $color-gray6;
+ @media screen and (max-width: 768px) {
+ font-size: 14px;
+ line-height: 19px;
+ }
+}
//PRODUTO INDISPONIVEL
.subscriberContainer {
position: relative;
+ .content {
+ @media screen and (max-width: 1024px) {
+ display: flex;
+ width: 100% !important;
+ max-width: unset;
+ }
+ }
.title {
font-size: 0;
@@ -484,6 +502,7 @@
border: none;
border-radius: 0%;
height: 49px;
+ cursor: pointer;
}
:global(.vtex-button__label) {
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index e79f8e8..4a746b9 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -27,6 +27,9 @@
padding: 0;
margin: 0;
height: 42px;
+ @media screen and (max-width: 1024px) {
+ margin: 5px 0;
+ }
:global(.vtex-button) {
background-color: transparent;