diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index a45cb87..070f383 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -58,7 +58,7 @@
.html--pdp-productMain :global(.vtex-store-components-3-x-container){
max-width: 100%;
}
-@media screen and (max-width: 320px){
+@media screen and (max-width: 375px){
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 100% !important;
max-height: 100% !important;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 9fa6dfb..03aea85 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -89,6 +89,11 @@
},
"children": ["product-images#description", "product-description"]
},
+ "product-description":{
+ "props":{
+ "collapseContent":false
+ }
+ },
"condition-layout.product#availability": {
"props": {
"conditions": [
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 9f092fd..0168755 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,7 +13,7 @@
margin-right: auto;
max-width: 96rem;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.container {
padding: 0 0 0 10.67%;
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index da42b84..0ee13a7 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -29,13 +29,13 @@
max-width: 526px;
}
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 5caa7a5..a6db70e 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -20,7 +20,7 @@
opacity: 1;
}
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 4736cac..d3dd458 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -90,19 +90,19 @@
.carouselContainer .productImage {
max-width: 85.238%;
}
-@media screen and (min-width: 156.25em) {
+@media screen and (min-width: 1920px) {
.carouselContainer .productImage {
min-width: 904px;
max-width: 100%;
}
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselContainer .productImage {
min-width: 296px;
max-width: 100%;
}
}
-@media screen and (max-width: 23.375em) {
+@media screen and (max-width: 375px) {
.carouselContainer .productImage {
min-width: 0;
max-width: 100%;
@@ -152,9 +152,6 @@
width: 90px;
}
-.productDescriptionContainer {
- background: pink;
-}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans", sans-serif;
font-style: normal;
diff --git a/styles/css/vtex.store-video.css b/styles/css/vtex.store-video.css
index 21f3a6d..0b76909 100644
--- a/styles/css/vtex.store-video.css
+++ b/styles/css/vtex.store-video.css
@@ -4,7 +4,7 @@
margin-top: 2%;
}
-@media only screen and (min-width: 640px) {
+@media only screen and (min-width: 280px) {
.videoContainer {
height: 700px;
}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index c843639..f42a4d8 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -3,7 +3,7 @@
margin-left: auto;
margin-right: auto;
max-width: 96rem;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
padding: 0 0 0 10.67%;
}
.term,.termArrow{
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 9106a60..07feddb 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -18,14 +18,14 @@
}
}
}
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 5578ada..f0c2dc8 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -11,7 +11,7 @@
opacity: 1;
}
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 8a9357d..5083fec 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -90,15 +90,15 @@
padding: 0 40px 0;
.productImage{
max-width:85.238%;
- @media screen and (min-width: 156.25em){
+ @media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%;
}
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
min-width: 296px;
max-width:100%;
}
- @media screen and (max-width: 23.375em){
+ @media screen and (max-width: 375px){
min-width: 0;
max-width:100%;
}
@@ -143,7 +143,6 @@
}
}
.productDescriptionContainer{
- background: pink;
.productDescriptionTitle{
font-family: 'Open Sans',sans-serif;
font-style: normal;
diff --git a/styles/sass/utils/_mixin.scss b/styles/sass/utils/_mixin.scss
index 923c227..0a8aae5 100644
--- a/styles/sass/utils/_mixin.scss
+++ b/styles/sass/utils/_mixin.scss
@@ -24,7 +24,7 @@
} //375px
}
@if $breakpoint == phone {
- @media only screen and (max-width: 37.5em) {
+ @media only screen and (max-width:1024px) {
@content;
} //600px
}
@@ -39,7 +39,7 @@
} //1200px
}
@if $breakpoint == big-desktop {
- @media only screen and (min-width: 112.5em) {
+ @media only screen and (min-width: 1900px) {
@content;
} //1800px
}