responsividade do mobile 375 e 1024

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

View File

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

View File

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

View File

@ -24,6 +24,13 @@
}
@media (max-width: 1024px) {
margin: 0 0 0 9px;
display: grid;
}
}
.color-img {
@ -62,14 +69,24 @@
font-weight: 400;
font-size: 20px;
line-height: 27px;
text-transform: capitalize;
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;
}
@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;
}
}
@ -120,15 +149,24 @@
}
.list {
@media (min-width: 2500px) {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
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 ;
}
}
}

View File

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