anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 93 commits from feature/challenge-vtex-io into develop 2023-02-03 17:14:03 +00:00
Conversation 0 Commits 93 Files Changed 68 +68 -15
2 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4eae32f126 - Show all commits

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

@ -101,9 +101,23 @@
height: 944px !important; height: 944px !important;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
height: auto;
}
}
@media (max-width: 768px) and (min-width: 377px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main { .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
width: 99.67% !important; width: 99.67% !important;
min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
}
}
@media (max-width: 377px) and (min-width: 376px) {
.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
width: 99.67% !important;
min-height: unset !important;
height: 296px !important; height: 296px !important;
object-fit: cover !important; object-fit: cover !important;
} }
@ -695,15 +709,17 @@
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 100%;
height: 944px; height: auto;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.productImagesContainer--image-description { .productImagesContainer--image-description {
width: 100%; width: 99.67% !important;
height: 296px; min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -718,15 +734,27 @@
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.productImagesContainer--image-description .productImage--image-description { .productImagesContainer--image-description .productImage--image-description {
height: 944px; height: auto;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 377px) {
.productImagesContainer--image-description .productImage--image-description { .productImagesContainer--image-description .productImage--image-description {
height: 296px; width: 100% !important;
min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
}
}
@media (max-width: 377px) and (min-width: 376px) {
.productImagesContainer--image-description .productImage--image-description {
width: 100% !important;
min-height: unset !important;
height: 296px !important;
object-fit: cover !important;
} }
} }
.productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main { .productImagesContainer--image-description .productImage--image-description .productImageTag--image-description--main {
height: auto !important;
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important; max-height: unset !important;
} }

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

@ -67,6 +67,7 @@
margin: 0; margin: 0;
height: 944px !important; height: 944px !important;
} }
.productImage { .productImage {
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
height: 904px !important; height: 904px !important;
@ -74,6 +75,7 @@
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important; height: 944px !important;
} }
.productImageTag--main { .productImageTag--main {
object-fit: unset !important; object-fit: unset !important;
max-height: unset !important; max-height: unset !important;
@ -85,8 +87,18 @@
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px !important; height: 944px !important;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 1025px) and (min-width: 768px) {
height: auto;
}
@media (max-width: 768px) and (min-width: 377px) {
width: 99.67% !important; width: 99.67% !important;
min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
}
@media (max-width: 377px) and (min-width: 376px) {
width: 99.67% !important;
min-height: unset !important;
height: 296px !important; height: 296px !important;
object-fit: cover !important; object-fit: cover !important;
} }
@ -660,13 +672,15 @@
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
width: 100%; width: 100%;
height: 944px; height: auto;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
width: 100%; width: 99.67% !important;
height: 296px; min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
margin-left: 0; margin-left: 0;
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -675,15 +689,26 @@
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
height: 872px; height: 872px;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
height: 944px; height: auto;
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 377px) {
height: 296px; width: 100% !important;
min-height: 296px !important;
object-fit: cover !important;
height: auto !important;
}
@media (max-width: 377px) and (min-width: 376px) {
width: 100% !important;
min-height: unset !important;
height: 296px !important;
object-fit: cover !important;
} }
& .productImageTag--image-description--main { & .productImageTag--image-description--main {
height: auto !important;
object-fit: cover !important; object-fit: cover !important;
max-height: unset !important; max-height: unset !important;
} }
} }
} }