diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1693ac5..ff3b55e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -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,} + } + ] + + }); } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 7f4161f..13d84db 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -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; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index b60d057..8286850 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -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; + + + } + } @@ -119,16 +148,25 @@ width: 8%; } - .list{ - font-family: 'Open Sans'; -font-style: normal; -font-weight: 400; -font-size: 18px; -line-height: 25px; + .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 ; - } + + } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index acdd774..bb4264a 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -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; + + + } }