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) {
.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;

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

@ -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 {

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

@ -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 {

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

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

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

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