forked from M3-Academy/challenge-vtex-io
feat(product-view):estilizando visualização de produto mobile
This commit is contained in:
parent
f1a6aca91c
commit
4d975b5f2b
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user