ueberjames/m3-academy-template-checkout-ueber-james
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsividade do mobile 375 e 1024

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-15 01:10:17 -03:00
parent 5b2bc1cb34
commit 7514f42743
4 changed files with 100 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
checkout/src/arquivos/js/components/Footer.js
View File

@ -145,6 +145,23 @@ export default class Footer {
variabreWidth: true, variabreWidth: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
responsive: [
{
breakpoint: 1025,
settings:
{slidesToShow: 3,
slidesToScroll: 1,}
},
{
breakpoint:376,
settings:
{slidesToShow: 2,
slidesToScroll: 1,}
}
]
}); });
} }
} }

6
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -107,9 +107,9 @@
no-repeat center center; no-repeat center center;
border: none; border: none;
background-color: transparent; background-color: transparent;
top: 39%; top: 38%;
z-index: 4; z-index: 4;
left: 10px; left: 6px;
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
@ -117,7 +117,7 @@
border: none; border: none;
background-color: transparent; background-color: transparent;
bottom: 57%; bottom: 57%;
right: 27px; right: 22px;
z-index: 4; z-index: 4;
} }

67
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -24,6 +24,13 @@
} }
@media (max-width: 1024px) {
margin: 0 0 0 9px;
display: grid;
}
} }
.color-img { .color-img {
@ -62,14 +69,24 @@
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 27px; line-height: 27px;
text-transform: capitalize; text-transform: capitalize;
color: #292929; color: #292929;
}
@media (max-width: 1024px) {
margin: 0px 0 16px 7px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 14px;
text-transform: capitalize;
color: #292929;
width: 269px;
} }
} }
@ -94,7 +111,19 @@
width: 1px; width: 1px;
} }
@media (min-width: 2500px) {width: 690px;} @media (min-width: 2500px) {
width: 690px;
}
@media (max-width: 1024px) {
width: 342px;
margin: 16px 0 16px 0;
order: -1;
}
} }
@ -119,16 +148,25 @@
width: 8%; width: 8%;
} }
.list{ .list {
@media (min-width: 2500px) {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
width: 388px;
}
@media (max-width: 1024px) {
margin: 0 0 16px 7px;
}
color: #292929; // color: #292929;
} }
@ -149,8 +187,7 @@ color: #292929;
} }
} }
@media (min-width: 2500px) {
width:388px ;
}
} }
} }

27
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -4,6 +4,11 @@
.container-carrossel-item{ .container-carrossel-item{
margin: 0 132px; margin: 0 132px;
@media (max-width: 1024px) {
margin: 0 16px;
}
} }
.slick-slide{ .slick-slide{
width: 242px; width: 242px;
@ -40,6 +45,11 @@ text-align: center;
color: #000000; color: #000000;
} }
@media (max-width: 375px){
font-size: 14px;
line-height: 28px
}
} }
.container-tamanho-cores{ .container-tamanho-cores{
@ -47,6 +57,10 @@ color: #000000;
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: 375px) {
flex-wrap: wrap
}
.tamanho{ .tamanho{
// width: 26px; // width: 26px;
@ -87,6 +101,10 @@ color: #000000;
} }
@media (max-width: 375px){
margin-bottom: 10px;
}
} }
} }
@ -95,6 +113,7 @@ color: #000000;
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center;
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-family: 'Open Sans'; font-family: 'Open Sans';
@ -106,6 +125,14 @@ text-align: center;
color: #000000; color: #000000;
} }
@media (max-width: 375px) {
font-size: 13px;
line-height: 18px;
text-align: center;
}
} }