diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index cf849ab..d680e56 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -102,6 +102,13 @@ } } @media screen and (max-width: 1024px) { + .html--pdp-productMain{ + flex-direction: column; + align-items: center; + } + .html--StackLayout,.html--pdp-InfoBuy{ + width: 89.23%; + } .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ border-bottom: 1px solid rgba(185, 185, 185, 1); padding-bottom: 16px; diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 6a1126e..8b74142 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -20,7 +20,8 @@ } @media screen and (max-width: 1024px) { .container { - padding: 0 0 0 10.67%; + text-align: center; + padding: 0; } } .container .term, .container .termArrow { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1971c59..73cdafe 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,6 +11,11 @@ display: none; } +@media screen and (max-width: 1024px) { + .productImagesContainer--carousel .productImagesGallerySlide { + width: 100% !important; + } +} @media screen and (min-width: 1920px) { .productImagesContainer--carousel .carouselGaleryCursor { max-height: 906px; @@ -126,14 +131,18 @@ border-radius: 8px; max-height: 100% !important; } +@media screen and (max-width: 1024px) { + .carouselContainer .productImage .productImageTag--main { + max-height: 100% !important; + max-width: 98.657%; + } +} .carouselGaleryThumbs { display: block; height: max-content; } .carouselGaleryThumbs .productImagesThumb { - width: max-content !important; - background: white; margin-right: 1em; } @media screen and (max-width: 1024px) { @@ -153,12 +162,12 @@ } @media screen and (max-width: 1024px) { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { - min-height: 4.9em; + min-height: 100%; } } .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { border-radius: 8px; - width: 90px; + min-height: 90px; } .productDescriptionContainer .productDescriptionTitle { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index ba5b0d6..5ad1b49 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -7,7 +7,8 @@ padding-left: 14.063%; } @media screen and (max-width: 1024px){ - padding: 0 0 0 10.67%; + text-align: center; + padding: 0; } .term,.termArrow{ display: none; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index cf29d30..6b94875 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,6 +2,11 @@ display: none; } .productImagesContainer--carousel{ + .productImagesGallerySlide{ + @media screen and (max-width: 1024px){ + width: 100% !important; + } + } .carouselGaleryCursor{ @media screen and (min-width: 1920px){ max-height: 906px; @@ -118,6 +123,10 @@ &-main{ border-radius: 8px; max-height: 100% !important; + @media screen and (max-width: 1024px){ + max-height: 100% !important; + max-width: 98.657%; + } } } } @@ -126,8 +135,6 @@ display: block; height: max-content; .productImagesThumb{ - width: max-content !important; - background:white; margin-right: 1em; @media screen and (max-width: 1024px){ width: 30% !important; @@ -140,13 +147,13 @@ border-radius: 8px; min-height: 5.54em; @media screen and (max-width: 1024px){ - min-height: 4.9em; + min-height: 100%; } } } .thumbImg{ border-radius: 8px; - width: 90px; + min-height: 90px; } } }