Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(product-image):main image mobile responsive

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-30 16:06:30 -03:00
parent 7e43bedb0d
commit 1531f798d1
2 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
styles/css/vtex.store-components.css
View File

@ -51,6 +51,18 @@
max-width: 100%; max-width: 100%;
} }
} }
@media screen and (max-width: 64.0625em) {
.carouselContainer .productImage {
min-width: 296px;
max-width: 100%;
}
}
@media screen and (max-width: 23.375em) {
.carouselContainer .productImage {
min-width: 0;
max-width: 100%;
}
}
.carouselContainer .productImage .productImageTag- { .carouselContainer .productImage .productImageTag- {
max-height: 100% !important; max-height: 100% !important;
margin-bottom: 1em; margin-bottom: 1em;

8
styles/sass/pages/product/vtex.store-components.scss
View File

@ -52,6 +52,14 @@
min-width: 904px; min-width: 904px;
max-width:100%; max-width:100%;
} }
@media screen and (max-width: 64.0625em){
min-width: 296px;
max-width:100%;
}
@media screen and (max-width: 23.375em){
min-width: 0;
max-width:100%;
}
.productImageTag-{ .productImageTag-{
max-height: 100% !important; max-height: 100% !important;
margin-bottom: 1em; margin-bottom: 1em;