media query for mobile screens

2022-01-15 15:03:24 +01:00
parent 6251849727
commit ad314311e2
2 changed files with 20 additions and 1 deletions
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@ -29,4 +29,23 @@ export default {
    padding: 0 10px;
    overflow-y: scroll;
 }
+
+@media screen and (max-width: 800px) {
+    #container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    #mainContent {
+        flex: 1;
+        width: 100%;
+    }
+
+    #sidebar {
+        flex: 1;
+        padding: 0;
+        width: 100%;
+    }
+}
 </style>