Made the Authentication Pages Responsive

src/Front_end/Authentication/forgot password/allfpass/fpass.module.css

@@ -74,3 +74,38 @@
 .enter:hover{
     background: #4509e9;
 }
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 12px;
+    font-weight: 250;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 6px;
+  }
+}

src/Front_end/Authentication/forgot password/allfpass/newpass.module.css

@@ -72,3 +72,23 @@
 .enter:hover {
   background: #f34324;
 }
+@media (max-width: 849px) {
+  .form {
+    width: 370px;
+    min-height: 320px;
+  }
+  .head {
+    height: 130px;
+    font-size: 15px;
+  }
+}
+@media (max-width: 390px) {
+  .form {
+    width: 340px;
+    min-height: 320px;
+  }
+  .head {
+    height: 110px;
+    font-size: 12px;
+  }
+}

src/Front_end/Authentication/forgot password/uifpasscon/passresetconfirm.jsx

@@ -27,8 +27,10 @@ function Uconfpass({ settoken, setmail }) {
         <div className={uconfpassCSS.overlaycon}>
           <div className={uconfpassCSS.overlay}>
             <div className={uconfpassCSS.overlay_left}>
-              <h1>Hey</h1>
-              <p>Already a user and forgot password?</p>
+              <div className={uconfpassCSS.overlayheadings}>
+                <h1>Hey</h1>
+                <p>Already a user and forgot password?</p>
+              </div>
               <button
                 className={uconfpassCSS.signin}
                 onClick={handleforgotClick}
@@ -37,8 +39,10 @@ function Uconfpass({ settoken, setmail }) {
               </button>
             </div>
             <div className={uconfpassCSS.overlay_right}>
-              <h1>Helooo</h1>
-              <p>Are you a new User then:</p>
+              <div className={uconfpassCSS.overlayheadings}>
+                <h1>Helooo</h1>
+                <p>Are you a new User then:</p>
+              </div>
               <button
                 className={uconfpassCSS.signup}
                 onClick={handleSignupClick}

src/Front_end/Authentication/forgot password/uifpasscon/uconfpass.module.css

@@ -31,7 +31,7 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 2;
+  z-index: 102;
 }
 .sign_up {
   position: absolute;
@@ -40,7 +40,7 @@
   height: 100%;
   transition: all 0.6s ease-in-out;
   width: 50%;
-  z-index: 1;
+  z-index: 101;
   opacity: 0;
 }
 .signin,
@@ -61,7 +61,7 @@
 .container.right_panel_active .sign_up {
   transform: translateX(100%);
   opacity: 1;
-  z-index: 5;
+  z-index: 105;
 }
 .overlaycon {
   position: absolute;
@@ -110,3 +110,90 @@
 .overlay_right {
   right: 0px;
 }
+.overlayheadings {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 849px) {
+  .container {
+    width: 370px;
+    min-height: 600px; /* Increased to accommodate minimum height */
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sign_in,
+  .sign_up {
+    min-height: 460px;
+    top: 0%;
+    left: 0;
+    height: 50%;
+    width: 100%; /* Minimum height for smaller screens */
+    transform: translateY(0); /* Reset transform for vertical layout */
+  }
+
+  .signin,
+  .signup {
+    margin: 15px;
+    width: 175px;
+    font-size: 12px;
+  }
+
+  .container.right_panel_active .sign_in {
+    transform: translateY(150px);
+  }
+
+  .container.right_panel_active .sign_up {
+    transform: translateY(150px);
+  }
+
+  .overlaycon {
+    left: 0px;
+    top: 50%;
+    height: 50%; /* Remaining height for overlay */
+    width: 100%;
+    z-index: 100;
+    transform: translateY(0); /* No vertical transformation for overlay */
+  }
+
+  .container.right_panel_active .overlaycon {
+    transform: translateY(-100%);
+  }
+
+  .overlay {
+    left: 0;
+    top: 50%; /* Position overlay above the container */
+    width: 100%;
+    height: 100%; /* Double height to cover entire container */
+    transform: translateY(0);
+  }
+
+  .container.right_panel_active .overlay {
+    transform: translateY(-100%);
+  }
+
+  .overlay_right,
+  .overlay_left {
+    flex-direction: row;
+    padding: 0px 10px;
+    left: 0px;
+    width: 100%;
+    height: 50%;
+    transform: translateY(0);
+  }
+
+  .overlay_left {
+    top: 50%;
+  }
+
+  .overlay_right {
+    top: 0%;
+  }
+}
+@media (max-width: 395px) {
+  .container {
+    width: 340px;
+  }
+}

src/Front_end/Authentication/loginpage/loginbox.module.css

@@ -74,3 +74,37 @@
 .enter:hover {
   background: #e4ba02;
 }
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 10px;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 10px;
+  }
+}

src/Front_end/Authentication/register/register.module.css

@@ -72,5 +72,39 @@
   transform: scale(0.9);
 }
 .enter:hover {
-    background: #ff9101;
+  background: #ff9101;
+}
+@media (max-width: 849px) {
+  .form {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+  }
+  .p {
+    font-size: 10px;
+    line-height: 5px;
+    margin: 8px 0px 10px;
+  }
+  .social {
+    margin: 8px 0px 0px 0px;
+  }
+  .media {
+    height: 30px;
+    width: 30px;
+    margin: 0px 2px;
+  }
+  .inputout {
+    width: 100%;
+    margin: 6px 5px;
+  }
+  .input {
+    padding: 12px 15px;
+    width: 100%;
+    height: 90%;
+  }
+  .enter {
+    font-size: 10px;
+    padding: 12px 38px;
+    margin: 6px;
+  }
 }