mobile view wip

myriad/static/style.css

@@ -42,35 +42,6 @@ form textarea{
 
 
 
-#main{
-    background-color: rgb(255, 255, 255, 0);
-    border-radius: 5px;
-    width: 60%;
-    margin:auto;
-    padding:20px;
-    display:flex;
-    margin-top:20px;
-}
-#nav{
-    margin-right:20px;
-    flex:20%;
-    height:fit-content;
-    position:sticky;
-    position: -webkit-sticky;
-}
-.navitem{
-    display:block;
-}
-
-.container{
-    background-color:#e6f7ff;
-    border-color:#99dfff;
-    border-style:solid;
-    border-width:2px;
-    flex: 80%;
-    padding: 10px;
-    border-radius:5px;
-}
 
 .profile{
     margin:15px;
@@ -104,7 +75,7 @@ form textarea{
 }
 .manage_images_2{
     clear:both;
-    width:600px;
+    width:500px;
 }
 .manage_icons_3{
     display:block;
@@ -240,14 +211,70 @@ form textarea{
 
 
 
+#mobile-nav{
+    display:none;
+    background-color:#e6f7ff;
+    border-color:#99dfff;
+    border-style:solid;
+    border-width:2px;
+    border-radius:5px;
+}
+#main{
+    background-color: rgb(255, 255, 255, 0);
+    border-radius: 5px;
+    width: 60%;
+    margin:auto;
+    padding:20px;
+    display:flex;
+    margin-top:20px;
+}
+#nav{
+    margin-right:20px;
+    flex:20%;
+    height:fit-content;
+    position:sticky;
+    position: -webkit-sticky;
+}
+.navitem{
+    display:block;
+}
 
+.container{
+    background-color:#e6f7ff;
+    border-color:#99dfff;
+    border-style:solid;
+    border-width:2px;
+    border-radius:5px;
+    flex: 80%;
+    padding: 10px;
+}
 
-@media (max-width: 1000px) {
+.mobile{
+    display:none;
+}
+
+@media (max-width: 1000px) 
+{
   #main{
     width:90%;
   }
   #nav{
     display:none;
   }
+  .mobile{
+    display:inline;
+  }
+  #mobile-nav
+  {
+    display:inline-block;
+    top:0;
+    position:absolute;
+    padding:10px;
+    margin-left:20px;
+    margin-top:10px;
+  }
+  .container{
+    margin:20px;
+  }
   
 }