Finished adaptation for mobile

src/components/AuthHeader/authHeader.scss

@@ -52,7 +52,13 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 768px) {
+  .auth-header {
+    display: none;
+  }
+}
+
+@media (max-width: 1024px) {
   .auth-header {
     display: none;
   }

src/components/SideBar/sidebar.scss

@@ -7,12 +7,16 @@
   height: 100%;
   background: #e1fccf;
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 1024px) {
     position: fixed;
-    width: 100%;
+    width: 100% !important;
     height: 80px;
     margin-bottom: 50px;
   }
+
+  @media (max-width: 1440px) {
+    width: 80px;
+  }
 }
 
 .auth-title {
@@ -71,7 +75,7 @@
     }
   }
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 1024px) {
     flex-direction: row;
     height: 100%;
 
@@ -170,7 +174,7 @@
     }
   }
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 1024px) {
     &__title {
       margin-top: 35px;
     }
@@ -190,7 +194,7 @@
   width: 424px;
   left: 140px;
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 1024px) {
     left: 0;
     width: 100%;
     height: 535px;

src/components/SliderWorkers/SliderWorkers.js

@@ -39,6 +39,8 @@ export const SliderWorkers = ({}) => {
 
   if (window.innerWidth < 575) {
     settings.slidesToShow = 1;
+  } else if (window.innerWidth < 1440) {
+    settings.slidesToShow = 2;
   }
 
   return (

src/components/SliderWorkers/sliderWorkers.scss

@@ -105,7 +105,7 @@
     }
   }
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 1024px) {
     &__title {
       flex-direction: column;
       padding: 120px 0 56px 0;

src/pages/AuthForDevelopers/AuthForDevelopers.js

@@ -40,7 +40,7 @@ const AuthForDevelopers = () => {
         <img
           className="auth-developers__vector-black"
           src={vectorBlack}
-          alt=""
+          alt="#"
         />
         <div className="container">
           <div className="change-mode">
@@ -49,10 +49,14 @@ const AuthForDevelopers = () => {
             </div>
             <div className="buttons">
               <Link to={"/authdev"}>
-                <button className="change-mode__dev">Для разработчика</button>
+                <button className="change-mode__developersForDev">
+                  Для разработчика
+                </button>
               </Link>
               <Link to={"/auth"}>
-                <button className="change-mode__part">Для партнёров</button>
+                <button className="change-mode__partnersForDev">
+                  Для партнёров
+                </button>
               </Link>
             </div>
           </div>

src/pages/AuthForDevelopers/authForDevelopers.scss

@@ -24,32 +24,32 @@
 }
 
 .change-mode {
-  display: flex;
+  &__partnersForDev {
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-
-  &__part {
-    width: 220px;
-    height: 50px;
     background: #52b7098c;
-    border-radius: 44px;
     color: #2d6505;
-    font-size: 16px;
-    border: none;
     margin-left: -40px;
   }
 
-  &__dev {
+  &__partnersForDev,
+  &__developersForDev {
     width: 220px;
-    position: relative;
     height: 50px;
-    background: #406128;
     border-radius: 44px;
-    color: white;
     font-size: 16px;
     border: none;
   }
+
+  &__developersForDev {
+    position: relative;
+    background: #406128;
+    color: white;
+  }
+
+  @media (max-width: 768px) {
+    &__partnersForDev {
+      margin: 15px 0 0 0;
+    }
+  }
 }
 
 @media (max-width: 575.98px) {
@@ -59,12 +59,6 @@
   }
 }
 
-/* .form__error {
-  font-size: 16px;
-  color: #b21;
-  margin-left: 45px;
-} */
-
 .auth-developers__arrow {
   margin-top: 360px;
 }

src/pages/AuthForPartners/AuthForPartners.js

@@ -44,15 +44,18 @@ const AuthForPartners = () => {
             </div>
             <div className="buttons">
               <Link to={"/authdev"}>
-                <button className="change-mode__developers">
+                <button className="change-mode__developersForPart">
                   Для разработчика
                 </button>
               </Link>
               <Link to={"/auth"}>
-                <button className="change-mode__partners">Для партнёров</button>
+                <button className="change-mode__partnersForPart">
+                  Для партнёров
+                </button>
               </Link>
             </div>
           </div>
+
           <div className="row">
             <div className="col-12 col-xl-6">
               <div className="auth-partners__box">

src/pages/AuthForPartners/authForPartners.scss

@@ -70,26 +70,37 @@
     }
   }
 
-  &__partners {
+  &__partnersForPart {
-    width: 220px;
-    height: 50px;
     background: #406128;
-    border-radius: 44px;
     color: white;
-    font-size: 16px;
-    border: none;
     margin-left: -40px;
   }
 
-  &__developers {
+  &__partnersForPart,
+  &__developersForPart {
     width: 220px;
     height: 50px;
-    background-color: #52b7098c;
     border-radius: 44px;
-    color: #2d6505;
     font-size: 16px;
     border: none;
   }
+
+  &__developersForPart {
+    background-color: #52b7098c;
+    color: #2d6505;
+  }
+
+  @media (max-width: 768px) {
+    .buttons {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    &__partnersForPart {
+      margin: 15px 0 0 0;
+    }
+  }
 }
 
 @media (max-width: 575.98px) {