diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1dbc087..acc6381 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -14,6 +14,7 @@ gap: 10px; align-items: center; margin-bottom: 16px; + margin-top: 16px; } .html--pdp-productMain :global(.vtex-button){ display: none; @@ -24,7 +25,12 @@ height: 49px; max-width: 77.354%; } - +.html--pdp-section_descriptions{ + display: flex; + flex-direction: column; + gap: 32px; + padding: 0px 40px 0px 40px; +} @media screen and (min-width: 1920px){ .html--buy-button :global(.vtex-button){ max-width: 766px; @@ -35,14 +41,12 @@ padding-left: 12.5393%; margin: 0; gap: 32px; + max-height: 100%; + } + .html--pdp-section_descriptions{ + padding: 0px 12.5393% 0px 12.5393%; } } -.html--pdp-section_descriptions{ - display: flex; - flex-direction: column; - gap: 32px; - padding: 0px 40px 0px 40px; -} .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){ gap: 32px; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 2c1ff89..7cd91e4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -333,6 +333,7 @@ }, "product-images#description": { "props": { + "blockClass": "img-description", "maxHeight": 872, "testid": "product-images", "aspectRatio": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e330da9..9444d75 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -182,6 +182,11 @@ .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { max-width: 100%; } +@media screen and (min-width: 1920px) { + .flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) { + max-width: 96rem; + } +} .flexRow--pdp-price .flexRowContent--pdp-price { justify-content: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 695f34f..aba5c15 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -18,7 +18,7 @@ } @media screen and (min-width: 1920px) { .productImagesContainer--carousel .carouselGaleryCursor { - max-height: 906px; + max-height: 100%; } } @@ -167,6 +167,10 @@ } } +.productImageTag--img-description { + max-width: 872px; +} + .carouselGaleryThumbs { display: block; height: max-content; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 0ae9d40..c59fd13 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -173,6 +173,9 @@ .flexRow--pdp-carrousel{ :global(.vtex-store-components-3-x-container){ max-width: 100%; + @media screen and (min-width: 1920px){ + max-width: 96rem; + } } } .flexRow--pdp-price{ diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2fba2a5..3d1bab5 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -9,7 +9,7 @@ } .carouselGaleryCursor{ @media screen and (min-width: 1920px){ - max-height: 906px; + max-height: 100%; } } } @@ -152,6 +152,9 @@ } } } +.productImageTag--img-description{ + max-width: 872px; +} .carouselGaleryThumbs{ display: block; height: max-content;