From 30293dc25b4dfae6d5d5d0eee28c20e96f608317 Mon Sep 17 00:00:00 2001
From: Sadeep Madurange <sadeep@asciimx.com>
Date: Fri, 5 Dec 2025 21:02:04 +0800
Subject: Fix alignment on small screens.

---
 assets/css/main.css     | 36 ++++++++++++++++--------------------
 assets/css/skeleton.css |  7 +++----
 2 files changed, 19 insertions(+), 24 deletions(-)

(limited to 'assets')

diff --git a/assets/css/main.css b/assets/css/main.css
index 1b7c3d2..ef53733 100644
--- a/assets/css/main.css
+++ b/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;
 }
diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css
index c1f6ac8..40c9bdc 100644
--- a/assets/css/skeleton.css
+++ b/assets/css/skeleton.css
@@ -33,7 +33,6 @@
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
-  padding: 0 20px;
   box-sizing: border-box; }
 .column,
 .columns {
@@ -44,14 +43,14 @@
 /* For devices larger than 400px */
 @media (min-width: 400px) {
   .container {
-    width: 85%;
-    padding: 0; }
+    padding: 0 3px; }
 }
 
 /* For devices larger than 550px */
 @media (min-width: 550px) {
   .container {
-    width: 80%; }
+    width: 80%;
+    padding: 0; }
   .column,
   .columns {
     margin-left: 4%; }
-- 
cgit v1.2.3