Adjust the padding to 16px and make it more responsive

wbstack · Dec 11, 2024 · e1ff026 · e1ff026
1 parent f7b1229
commit e1ff026
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/Cards/Login.vue b/src/components/Cards/Login.vue
@@ -102,12 +102,14 @@ export default {
 <style lang="css" scoped>
 .card-width {
   width: 477px;
+  padding: 16px;
+
 }
 
-@media (max-width: 480px) {
+@media (max-width: 620px) {
   .card-width {
-    width: calc(100% - 2px);
-    max-width: 320px; /* Limit to 320px for very small screens */
+    width: calc(100%);
+    margin-right: 110px;
   }
 }
 </style>
diff --git a/src/components/Pages/Login.vue b/src/components/Pages/Login.vue
@@ -1,12 +1,12 @@
 <template>
-    <v-main>
+    <v-main class="pa-1">
       <v-container class="fill-height" fluid >
         <v-row align="center" justify="center">
             <LoginCard title="Log in" buttonText="Log in"/>
         </v-row>
-        <v-row class="pt-12" justify="center" >
+        <v-row justify="center" >
           <div>
-            Need an account?
+            <div class="pa-4">Need an account?</div>
             <v-btn
               class="ms-6"
               to="/create-account"