diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e515c15..9b049b7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -44,7 +44,7 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["flex-layout.col#stack"] }, "stack-layout": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6582f21..402421a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -42,18 +42,28 @@ .carouselContainer { padding: 0 40px 0; } -.carouselContainer .productImageTag { +.carouselContainer .productImage { + max-width: 85.238%; +} +@media screen and (min-width: 156.25em) { + .carouselContainer .productImage { + min-width: 904px; + max-width: 100%; + } +} +.carouselContainer .productImage .productImageTag- { max-height: 100% !important; + margin-bottom: 1em; align-self: stretch; - margin-bottom: 16px; } -.carouselContainer .productImagesThumb { - background: white; -} -.carouselContainer .productImagesThumb .figure { - width: 100%; +.carouselContainer .productImage .productImageTag--main { + max-height: 100% !important; } .carouselGaleryThumbs .productImagesThumb { - margin-right: 16px; + background: white; + margin-right: 1em; +} +.carouselGaleryThumbs .productImagesThumb .figure { + width: 100%; } \ 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 4113adf..9dd1860 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -46,22 +46,29 @@ .carouselContainer{ padding: 0 40px 0; - - .productImageTag{ - max-height: 100% !important; - align-self: stretch; - margin-bottom: 16px; - } - .productImagesThumb{ - background:white; - .figure{ - width: 100%; + .productImage{ + max-width:85.238%; + @media screen and (min-width: 156.25em){ + min-width: 904px; + max-width:100%; + } + .productImageTag-{ + max-height: 100% !important; + margin-bottom: 1em; + align-self: stretch; + &-main{ + max-height: 100% !important; + } } } } .carouselGaleryThumbs{ .productImagesThumb{ - margin-right: 16px; + background:white; + margin-right: 1em; + .figure{ + width: 100%; + } } }