make all mobile sites into media queries :)))

1 files changed, 20 insertions, 1 deletions

diff --git a/css/main.css b/css/main.css
index 30d068f..ec0b8ea 100644
--- a/css/main.css
+++ b/css/main.css
@@ -200,12 +200,22 @@ body {
 }
 
 main {
-  /* margin: auto; ** This is only needed for mobile */
   font-size: 6vh;
   line-height: 1.2;
   max-width: 75vh;
 }
 
+@media(max-width: 768px) {
+  main {
+    margin: auto;
+    width: 100%;
+  }
+
+  .halloween {
+    display: none;
+  }
+}
+
 /* I was trying to figure out how to only call the <a> tags from index.html, so it wouldn't change the values for other <a> tags, and I tried everything,
 ** or so I thought, and I figured out I had to do `.links a` by scrolling up and saw `.loader row span` which wasn't even the correct syntax but I removed
 ** the `row` and IT WORKED! I actually got so happy lol. - 2:15 AM, 8/7/2019
@@ -254,6 +264,12 @@ main {
   justify-content: center;
 }
 
+@media(max-width: 768px) {
+  .navigation-bar {
+    display: none;
+  }
+}
+
 .nav {
   overflow: hidden;
   max-width: 100%;
@@ -334,8 +350,11 @@ main {
   border-radius: 8px 8px 0 0;
 }
 
+/*
+// NO IDEA WHAT THIS DOES HAHA
 @media (max-width: 580px) {
   .nav {
     overflow: auto;
   }
 }
+*/
\ No newline at end of file