Make login page responsive

Astylodon · May 30, 2024 · 481cde0 · 481cde0
1 parent 124c362
commit 481cde0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/assets/css/_login.scss b/assets/css/_login.scss
@@ -2,8 +2,16 @@
     height: 90vh;
 }
 
-.login .form-group {
-    width: 25vh;
+@media (min-width: 540px) {
+    .login .form-group {
+        width: 250px;
+    }
+}
+
+@media (max-width: 540px) {
+    .login .form-group {
+        width: 100%;
+    }
 }
 
 .login input[type=submit] {

diff --git a/views/login/login.html.twig b/views/login/login.html.twig
@@ -7,7 +7,7 @@
         <div class="top-alert">{{ error }}</div>
     {% endif %}
 
-    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login">
+    <form action="" method="post" class="d-flex justify-content-center align-items-center flex-column login m-2">
         <div class="mb-2 form-group">
             <label for="usernameInput" class="form-label">Username</label>
             <input type="text" id="usernameInput" name="username" class="form-control" required autofocus value="{{ username|default }}" placeholder="Enter a username">