Finished adaptation for mobile

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;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-
-  &__part {
-    width: 220px;
-    height: 50px;
+  &__partnersForDev {
     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 {
-    width: 220px;
-    height: 50px;
+  &__partnersForPart {
     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) {