Added style for mobile

frontend/src/components/AboutPage.vue

@@ -55,4 +55,9 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    @media (max-aspect-ratio:13/16) {
+        #About {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/BetBox.vue

@@ -129,6 +129,11 @@ onMounted(() => {
 #lower {
     height: 200px;
 }
+@media (max-aspect-ratio:13/16) {
+    #GameWindow {
+        flex-direction: row;
+    }
+}
 
 @property --p{
   syntax: '<number>';

frontend/src/components/ChatBox.vue

@@ -160,4 +160,23 @@ function sendChat() {
     #ChatInput:focus {
         outline: none !important;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #ChatBoxContainer {
+            width:80%;
+            max-width: 80%;
+            margin: auto;
+            margin-bottom: 30px;
+        }
+        #ChatWindow {
+            width:95%;
+        }
+        #ChatInput {
+            width: 65%;
+        }
+        #ChatInputContainer {
+            width: 95%;
+            margin: auto;
+        }
+    }
 </style>

frontend/src/components/GameWindow.vue

@@ -15,4 +15,9 @@
         display: flex;
         justify-content: space-around;
     }
+    @media (max-aspect-ratio:13/16) {
+        #GameWindow {
+            flex-direction: column;
+        }
+    }
 </style>

frontend/src/components/HowToPlay.vue

@@ -57,4 +57,10 @@ defineEmits(['display'])
         background-clip: text;
         color: transparent;
     }
+    
+    @media (max-aspect-ratio:13/16) {
+        #HowTo {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/LoginForm.vue

@@ -198,4 +198,9 @@ function login(e) {
     .badInput {
         border: 2px solid red;
     }
+    @media (max-aspect-ratio:13/16) {
+        #LoginContainer {
+            width: 80%;
+        }
+    }
 </style>

frontend/src/components/MassFlip.vue

@@ -32,22 +32,29 @@ function displayHandle(c) {
 
 <style scoped>
 #Container {
-  width: 1000px;
-  max-width: 100%;
-  height: 75vh;
-  border-radius: 30px;
-  margin: auto;
-  color: #f3f9f8;
-  background-color: #001d3d;
-  position: relative;
+    width: 1000px;
+    max-width: 100%;
+    height: 75vh;
+    border-radius: 30px;
+    margin: auto;
+    color: #f3f9f8;
+    background-color: #001d3d;
+    position: relative;
 }
 .dullBG {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border-radius: 30px;
-  background-color: rgba(0, 8, 20,0.7);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border-radius: 30px;
+    background-color: rgba(0, 8, 20,0.7);
+}
+    
+@media (max-aspect-ratio:13/16) {
+    #Container {
+        width: 95%;
+        height: auto;
+    }
 }
 </style>

frontend/src/components/PageHeader.vue

@@ -64,4 +64,10 @@ function logout() {
         cursor: pointer;
         color: #bbb;
     }
+    @media (max-aspect-ratio:13/16) {
+        nav {
+            max-width: 80%;
+
+        }
+    }
 </style>