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;
}
}
}