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(thumnails):thumnails mobile responsivas

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-30 19:07:29 -03:00
parent 1531f798d1
commit 9187738596
3 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
store/blocks/pdp/product.jsonc
View File

@ -82,7 +82,7 @@
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "1:1"
"phone": "auto"
},
"showNavigationArrows": false,
"showPaginationDots": false,

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

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

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

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