responsividade do mobile 375 e 1024

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,}
+                }
+            ]
+
+
         });
     }
 }

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;
 
 }

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 ;
-        }
+
+
     }
 }

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;
+
+
+    }
 }