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-view):estilizando visualização de produto mobile

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-08 02:20:03 -03:00
parent f1a6aca91c
commit 4d975b5f2b
5 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/components/Html/styles.css
View File

@ -102,6 +102,13 @@
} }
} }
@media screen and (max-width: 1024px) { @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){ .html--pdp-descriptions :global(.vtex-store-components-3-x-container){
border-bottom: 1px solid rgba(185, 185, 185, 1); border-bottom: 1px solid rgba(185, 185, 185, 1);
padding-bottom: 16px; padding-bottom: 16px;

3
styles/css/vtex.breadcrumb.css
View File

@ -20,7 +20,8 @@
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.container { .container {
padding: 0 0 0 10.67%; text-align: center;
padding: 0;
} }
} }
.container .term, .container .termArrow { .container .term, .container .termArrow {

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

@ -11,6 +11,11 @@
display: none; display: none;
} }
@media screen and (max-width: 1024px) {
.productImagesContainer--carousel .productImagesGallerySlide {
width: 100% !important;
}
}
@media screen and (min-width: 1920px) { @media screen and (min-width: 1920px) {
.productImagesContainer--carousel .carouselGaleryCursor { .productImagesContainer--carousel .carouselGaleryCursor {
max-height: 906px; max-height: 906px;
@ -126,14 +131,18 @@
border-radius: 8px; border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
} }
@media screen and (max-width: 1024px) {
.carouselContainer .productImage .productImageTag--main {
max-height: 100% !important;
max-width: 98.657%;
}
}
.carouselGaleryThumbs { .carouselGaleryThumbs {
display: block; display: block;
height: max-content; height: max-content;
} }
.carouselGaleryThumbs .productImagesThumb { .carouselGaleryThumbs .productImagesThumb {
width: max-content !important;
background: white;
margin-right: 1em; margin-right: 1em;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -153,12 +162,12 @@
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em; min-height: 100%;
} }
} }
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg { .carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px; border-radius: 8px;
width: 90px; min-height: 90px;
} }
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {

3
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -7,7 +7,8 @@
padding-left: 14.063%; padding-left: 14.063%;
} }
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
padding: 0 0 0 10.67%; text-align: center;
padding: 0;
} }
.term,.termArrow{ .term,.termArrow{
display: none; display: none;

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

@ -2,6 +2,11 @@
display: none; display: none;
} }
.productImagesContainer--carousel{ .productImagesContainer--carousel{
.productImagesGallerySlide{
@media screen and (max-width: 1024px){
width: 100% !important;
}
}
.carouselGaleryCursor{ .carouselGaleryCursor{
@media screen and (min-width: 1920px){ @media screen and (min-width: 1920px){
max-height: 906px; max-height: 906px;
@ -118,6 +123,10 @@
&-main{ &-main{
border-radius: 8px; border-radius: 8px;
max-height: 100% !important; max-height: 100% !important;
@media screen and (max-width: 1024px){
max-height: 100% !important;
max-width: 98.657%;
}
} }
} }
} }
@ -126,8 +135,6 @@
display: block; display: block;
height: max-content; height: max-content;
.productImagesThumb{ .productImagesThumb{
width: max-content !important;
background:white;
margin-right: 1em; margin-right: 1em;
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
width: 30% !important; width: 30% !important;
@ -140,13 +147,13 @@
border-radius: 8px; border-radius: 8px;
min-height: 5.54em; min-height: 5.54em;
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
min-height: 4.9em; min-height: 100%;
} }
} }
} }
.thumbImg{ .thumbImg{
border-radius: 8px; border-radius: 8px;
width: 90px; min-height: 90px;
} }
} }
} }