Update responsive design

MrTimeey · May 16, 2021 · 8535930 · 8535930
1 parent e32062a
commit 8535930
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/components/AdditionalTextFields.vue b/src/components/AdditionalTextFields.vue
@@ -103,4 +103,27 @@ a:hover {
  {
     opacity: 0;
 }
+
+@media screen and (max-width: 768px) {
+    .author {
+        font-size: 20px;
+    }
+    .link-list {
+        font-size: 20px;
+    }
+    .app-title {
+        font-size: 40px;
+    }
+}
+@media screen and (max-width: 400px) {
+    .author {
+        font-size: 15px;
+    }
+    .link-list {
+        font-size: 15px;
+    }
+    .app-title {
+        font-size: 25px;
+    }
+}
 </style>
diff --git a/src/components/WordContainer.vue b/src/components/WordContainer.vue
@@ -80,10 +80,22 @@ export default {
         max-width: 80%;
     }
     .word {
-        font-size: 120px;
+        font-size: 80px;
     }
     .word-definition {
-        font-size: 30px;
+        font-size: 25px;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .word-card {
+        max-width: 80%;
+    }
+    .word {
+        font-size: 50px;
+    }
+    .word-definition {
+        font-size: 20px;
     }
 }
 </style>