feat: footer css responsivo

This commit is contained in:
Matheus Mariosa 2022-12-23 04:21:06 -03:00
parent b18c518e93
commit 574dd3915f
3 changed files with 106 additions and 13 deletions

View File

@ -160,7 +160,8 @@ export default class Footer {
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
Infinity: false Infinity: false,
}); });
} }
} }

View File

@ -11,9 +11,13 @@ html {
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; width: 94.9734%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
@media only screen and (max-width: 1024px){
margin: auto 8px
}
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header .container {
width: 79.53125%; width: 79.53125%;
margin: 0 auto; margin: 0 auto;
} }
@ -68,14 +72,15 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: $color-gray2; color: #292929;
font-family: $font-family; font-family: 'Open Sans';
font-weight: 500; font-weight: 700;
font-size: 36px; font-size: 24px;
line-height: 42px; line-height: 33px;
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
margin: 17px 0 16px;
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;

View File

@ -100,7 +100,7 @@
}; };
&__wrapper { &__wrapper {
border-top: 1px solid $color-gray2; border-top: 1px solid black;
align-items: center; align-items: center;
display: flex; display: flex;
margin: 0; margin: 0;
@ -114,11 +114,21 @@
margin: 0; margin: 0;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@media only screen and (max-width: 1024px){
flex-direction: column;
align-items: normal;
justify-content: normal;
padding: 22px 0;
}
@media only screen and (max-width: 375px){
margin-top: 16px;
}
} }
} }
&__address { &__address {
color: $color-gray2; color: #292929;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -134,6 +144,21 @@
margin-bottom: 24px; margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@media only screen and (min-width: 2500px){
font-size: 20px;
line-height: 27px;
width: 36.7682673%;
margin-right: 0;
}
@media only screen and (max-width: 1024px){
order: 2;
width: 100%;
margin: 16px 0;
line-height: 14px;
margin-left: 8px;
}
} }
&__stamps { &__stamps {
@ -148,6 +173,18 @@
align-self: center; align-self: center;
margin-bottom: 12px; margin-bottom: 12px;
} }
@media only screen and (min-width: 2500px){
margin: 0;
width: 46.876382%;
}
@media only screen and (max-width: 1024px){
order: 1;
}
@media only screen and (max-width: 375px){
width: 100%;
margin-bottom: 0;
align-self: normal;
}
.footerCheckout__payments{ .footerCheckout__payments{
.footerCheckout-payments-ul{ .footerCheckout-payments-ul{
@ -157,17 +194,35 @@
li{ li{
margin-right: 13.35px; margin-right: 13.35px;
@media only screen and (max-width: 1024px){
margin-right: 5px;
}
} }
img{ img{
height: 20px; height: 20px;
@media only screen and (min-width: 2500px){
height: 39.06px;
width: 69.63px;
}
@media only screen and (max-width: 1024px){
min-width: 35px;
}
} }
} }
} }
.footerCheckout__vtexpci{ .footerCheckout__vtexpci{
img{ img{
width: 53px; min-width: 53px;
height: 33px; height: 33px;
@media only screen and (min-width: 2500px){
width: 103.52px;
height: 64.46px;
}
} }
} }
@ -187,12 +242,34 @@
margin: 0; margin: 0;
width: 17.8598%; width: 17.8598%;
@media only screen and (min-width: 2500px){
width: 16.3827269%;
}
@media only screen and (max-width: 1024px){
order: 3;
width: 100%;
margin-left: 8px;
}
li:last-child { li:last-child {
margin-left: 10.73px; margin-left: 10.73px;
@media only screen and (min-width: 2500px){
margin-left: 10.23px
}
@media only screen and (max-width: 1024px){
margin-left: 10.45px;
}
.devolperByM3{ .devolperByM3{
height: 15.65px; height: 15.65px;
width: 28.66px; width: 28.66px;
@media only screen and (min-width: 2500px){
height: 30.56px;
width: 55.98px;
}
} }
} }
@ -212,11 +289,21 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
color: black; color: #292929;
@media only screen and (min-width: 2500px){
font-size: 18px;
line-height: 25px;
}
} }
.devolperByVTEX{ .devolperByVTEX{
height: 16px; height: 16px;
width: 44.92px; width: 44.92px;
@media only screen and (min-width: 2500px){
height: 31.25px;
width: 87.73px;
}
} }
} }
} }