diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9b049b7..1502415 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -82,7 +82,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "1:1" + "phone": "auto" }, "showNavigationArrows": false, "showPaginationDots": false, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a1e342a..0f9f1b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,10 +72,40 @@ max-height: 100% !important; } +.carouselGaleryThumbs { + display: block; + height: max-content; +} .carouselGaleryThumbs .productImagesThumb { + width: max-content !important; background: white; margin-right: 1em; } +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb { + width: 32% !important; + } +} .carouselGaleryThumbs .productImagesThumb .figure { width: 100%; +} +.carouselGaleryThumbs .productImagesThumb .figure--video { + min-height: 90px; +} +.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + min-height: 5.54em; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { + width: 50px; + min-height: 4.9em; + } +} +.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + width: 90px; +} +@media screen and (max-width: 64.0625em) { + .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { + width: 50px; + } } \ 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 2f1b0a2..45a2890 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -71,11 +71,33 @@ } } .carouselGaleryThumbs{ + display: block; + height: max-content; .productImagesThumb{ + width: max-content !important; background:white; margin-right: 1em; + @media screen and (max-width: 64.0625em){ + width: 32% !important; + } .figure{ width: 100%; + &--video{ + min-height: 90px; + .thumbImg{ + min-height: 5.54em; + @media screen and (max-width: 64.0625em){ + width: 50px; + min-height: 4.9em; + } + } + } + .thumbImg{ + width: 90px; + @media screen and (max-width: 64.0625em){ + width: 50px; + } + } } } }