Make log in card responsiv for screens as small as 320px (#934)

rosalieper · web-flow · commit e7ccee1a48f8 · 2024-12-17T16:54:55.000+01:00
* Make log in card responsiv for screens as small as 320px

* Adjust the padding to 16px and make it more responsive

* Remove padding on login card
diff --git a/src/components/Cards/Login.vue b/src/components/Cards/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit="login">
-    <v-card class="elevation-12 mt-16" width="477px">
+    <v-card class="elevation-12 mt-16 card-width">
       <v-toolbar dark color="primary">
         <v-toolbar-title>{{title}}</v-toolbar-title>
       </v-toolbar>
@@ -100,4 +100,15 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.card-width {
+  width: 477px;
+
+}
+
+@media (max-width: 620px) {
+  .card-width {
+    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"
