diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 8bdad03..6740e1d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -131,5 +131,4 @@ export default class Footer { `; } - } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 825f722..cc033dd 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -14,8 +14,13 @@ html { footer .footerCheckout__wrapper { - width: 94.9734%; + // width: 94.9734%; + width: 100%; margin: auto auto 0 auto; + + @media (max-width: 1023px) { + // width: 91.2%; + } } footer .footerCheckout__wrapper .container { @@ -36,7 +41,7 @@ footer .footerCheckout__prateleira, @media (max-width: 1024px) { width: 91.47%; - + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 8fcaf0b..e4156a8 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -6,8 +6,21 @@ .container { width: 100%; border-top: 1px solid $black-500; + + @media (max-width: 1024px) { + // display: grid; + flex-direction: column; + align-items: flex-start !important; + // gap: 16px; + } } + // @media (max-width: 1024px) { + // .container :nth-child(1) { order: 2; } + // .container :nth-child(2) { order: 1; } + // .container :nth-child(3) { order: 3; } + // } + &__prateleira { width: 1016px; margin: 0 132px 56px !important; @@ -102,9 +115,15 @@ align-items: center; display: flex; justify-content: space-between; + position: relative; @media (max-width: 1024px) { - display: none; + // display: none; + } + + .container { + border-top: 1px solid #000; + position: absolute; } } @@ -119,9 +138,19 @@ max-width: 40%; @include mq(md, max) { - margin-bottom: 24px; + // margin-bottom: 24px; max-width: 100%; } + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 27px; + } + + @media (max-width: 1024px) { + order: 2; + margin: 0 0 16px 16px; + } } &__stamps { @@ -131,24 +160,31 @@ display: flex; justify-self: center; list-style: none; + gap: 13px; + + @media (min-width: 2500px) { + width: 27.6%; + margin-top: 13px; + } + + @media (max-width: 1024px) { + width: 33.44%; + margin: 22px 0 40px 16px; + } + + @media (max-width: 345px) { + order: 1; + width: 100%; + gap: 4px; + margin: 23px 0; + width: 91.2%; + } - // li .vtex-pci { - // &::before { - // display: block; - // content: ""; - // height: 24px; - // width: 1px; - // color: $gray-400; - // } - // width: 81.62% - // img { - // } - // } @include mq(md, max) { align-self: center; - margin-bottom: 12px; + // margin-bottom: 12px; } &__divider { @@ -156,8 +192,12 @@ background-color: $gray-400; display: inline-block; height: 24px; - margin: 0 8px; + // margin: 0 8px; width: 1px; + + @media (min-width: 2500px) { + height: 42px; + } } } @@ -168,16 +208,30 @@ color: $black-400; margin: 27px 0 22px; + @media (max-width: 1024px) { + order: 3; + margin: 0; + margin: 0 0 19px 16px; + } + div { display: flex; } .vtex-logo { width: 44.92px; + + @media (min-width: 2500px) { + width: 87.73px; + } } .m3-logo { width: 28.66px; + + @media (min-width: 2500px) { + width: 55.98px; + } } li .by-vtex { @@ -207,6 +261,11 @@ font-size: 10px; line-height: 14px; // margin-right: 8px; + + @media (min-width: 2500px) { + font-size: 18px; + line-height: 25px; + } } } }