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) {
|
@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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user