Merge pull request #628 from Kiran1689/fix-login-page-issue

fixed login page allignment issue
Susmita-Dey · Nov 11, 2023 · 037a7cb · 037a7cb
2 parents cc4f38e + 5ff436e
commit 037a7cb
Showing 1 changed file with 108 additions and 43 deletions.
diff --git a/html/css/login.css b/html/css/login.css
@@ -82,13 +82,13 @@ img {
   text-overflow: clip;
 }
 
-.forgotpass {
+/*.forgotpass {
   display: flex;
   justify-content: space-between;
   width: 350px;
   align-items: center;
 }
-
+*/
 .forgotpass span {
   font-family: "Poppins";
   font-weight: 650;
@@ -157,72 +157,137 @@ img {
   display: none;
 }
 
-@media screen and (max-width: 1096px) {
-  .container {
-    flex-direction: column;
-    width: 100%;
-    justify-items: center;
+
+@media screen and (max-width: 1920px) {
+  img {
+    width: 40%;
+    height: 2%;
+    margin: -25em 45em;
+    margin-top: 8%;
   }
 
-  .login,
-  .register {
-    order: 2;
-    width: 400px;
-    padding: 0 2rem;
+  .login ,.register {
+    margin-left: 8%;
+    margin-top: -5%;
   }
 
-  .welcome {
-    text-align: center;
+  .forgotpass span {
+    margin-left: 230px;
   }
-}
 
-@media screen and (max-width: 484px) {
-  .container {
-    flex-direction: column;
-    width: auto;
-    height: 100%;
-    justify-items: center;
-    align-items: center;
+  .back{
+    margin-top: -3.5%;
   }
 
   .welcome {
-    text-align: center;
+    margin-left:8%;
   }
 
-  .login>* {
-    padding: 0 2rem;
+  .welcome span {
+   margin-left: 10%;
   }
-
-  .register>* {
-    padding: 0 2rem;
+}
+@media screen and (max-width: 970px) {
+  img {
+    margin: 6em 25em;
+    width: 70%;
   }
+}
+@media screen and (max-width: 720px) {
+  img {
+    margin: 0em 0em;
+    width: 80%;
+    height: 40%;
+    padding-bottom: 12%;
 
-  .image {
-    margin: 0 2px;
   }
-
+  .login {
+    margin-top: 8%;
+  }
+
+}
+@media screen and (max-width: 575px) {
   img {
-    width: auto;
-    height: 350px;
+    width: 50%;
+    height: 42%;
+    padding-bottom: 20%;
   }
-
+  
 }
-
-@media screen and (max-width: 380px) {
-  .container {
-    flex-direction: column;
-    width: auto;
-    height: 100%;
-    justify-items: center;
+@media screen and (max-width: 484px) {
+  img {
+    width: 140%;
+    margin-top: 15%;
+  }
+  .login {
+    margin-top: 45%;
   }
+}
+@media screen and (max-width: 380px) {
 
   .welcome {
     text-align: center;
+    margin-top: -20%;
+    margin-left: 15px;
+  }
+  .welcome h1 {
+    font-size: 1.5em;
+    margin-left: auto;
+    margin-right: 15px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0;
   }
 
   img {
-    max-width: 100%;
-    height: auto;
+    max-width: 80%;
+    height: 40%;
+    margin-left: 30px;
+    margin-right: auto;
+    justify-content: center;
+    align-items: center;
+    margin-top: 0;
   }
 
+  .login {
+    margin-top: -6%;
+    margin-left: 10px;
+  }
+  .inputs {
+    margin: 2.2em 0em;
+    margin-bottom: 0em;
+  }
+
+  .inputs span {
+    margin-left: 15px;
+  }
+  .inputbox {
+    width: 270px;
+    margin-left: 15px;
+  }
+
+  .forgotpass span {
+    margin-left: 200px;
+  }
+
+  .back {
+    margin-top: -5%;
+    margin-left: 15px;
+  }
+
+  .signin {
+    width: 300px;
+    margin-left:12px ;
+    margin-top: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .signupline {
+    padding-top: 5px;
+  }
+
+  .welcome span {
+    margin-right: 15%;
+  }
 }