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 }