Fix alignment on small screens.

1 files changed, 16 insertions, 20 deletions

diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index 1b7c3d2..ef53733 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -84,10 +84,22 @@ td {
   text-decoration: none;
 }
 
-#nav-container {
-  /* override .container's right padding
-     to prevent wrapping on firefox mobile */
-  padding: 0;
+@media (min-width: 400px) {
+  #nav-container {
+    padding: 0 6px; 
+  }
+  .container-2 {
+    padding: 0 3px; 
+  }
+}
+
+@media (min-width: 550px) {
+  #nav-container {
+    padding: 0; 
+  }
+  .post-container {
+    padding: 0; 
+  }
 }
 
 .author {
@@ -105,22 +117,6 @@ td {
   }
 }
 
-@media only screen and (max-device-width: 480px) {
-  /* firefox */
-  @supports (-moz-appearance: none) {
-    .title {
-      font-size: 1.8em !important;
-    }
-  }
-
-  /* other */
-  @supports (not (-moz-appearance: none)) {
-    .title {
-      font-size: 2.0em !important;
-    }
-  }
-}
-
 .center {
   text-align: center;
 }