From 0dc2cd7ccc8a51e6ef16ab858e2e39aab5c2938e Mon Sep 17 00:00:00 2001
From: Jarvis Prime <jarvis@openclaw.local>
Date: Tue, 24 Mar 2026 04:16:25 +0000
Subject: [PATCH] Add responsive CSS for mobile-friendly layout

---
 src/layouts/Base.astro | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index a71382c..7337f9c 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -387,20 +387,49 @@ const isHome = currentPath === '/';
 
     /* === RESPONSIVE HELPERS === */
     @media (max-width: 960px) {
-      .d-placing { width: 95%; }
+      .d-placing { width: 95%; padding: 0 10px; }
       .d-menu { flex-wrap: wrap; justify-content: center; gap: 2px; display: flex; list-style: none; }
       .d-menu li { margin: 0; float: none; padding-right: 8px; }
       .d-menu .menu-item { font-size: 12px; padding: 4px 6px; }
       .d-footer .left, .d-footer .right { float: none; width: 100%; }
-      .product-content .right { width: 100%; }
-      .product-content .left { width: 100%; }
+      .product-content .right { width: 100%; float: none; }
+      .product-content .left { width: 100%; float: none; }
+      .product-content .sides { width: 100%; }
       .support-content .left { width: 100%; }
       .support-content .right { width: 100%; float: none; }
       .about-content p { width: 100%; }
-      .hp-wrap iframe { float: none; margin: 15px auto; display: block; }
+      .about-content .libor { width: 100%; margin: 20px 0; }
+      .hp-wrap iframe { float: none; margin: 15px auto; display: block; max-width: 100%; }
       .buttons-hp-vertical { float: none; margin: 15px auto; }
       .home-static .list-l, .home-static .list-r { float: none; width: 100%; }
       .owl-flag { display: none; }
+      /* Responsive images */
+      img { max-width: 100%; height: auto; }
+      /* Tables */
+      table { max-width: 100%; overflow-x: auto; display: block; }
+      /* Pricing tables */
+      .pricing-table { width: 100%; }
+      .pricing-table td, .pricing-table th { padding: 6px 8px; font-size: 13px; }
+      /* Comics grid */
+      .comics-grid { grid-template-columns: 1fr; }
+      /* Footer */
+      .d-footer .latest-posts { height: auto; }
+      .d-footer .news .news-item { width: 100%; }
+      /* General text */
+      .d-content-wrap { word-wrap: break-word; overflow-wrap: break-word; }
+      /* Sidebar links */
+      .product-content .right ul { padding-left: 15px; }
+    }
+    @media (max-width: 480px) {
+      .d-header { padding: 10px 5px; }
+      .d-menu .menu-item { font-size: 11px; padding: 3px 4px; }
+      .d-menu li { padding-right: 4px; }
+      h1 { font-size: 1.4em; }
+      h2 { font-size: 1.2em; }
+      h3 { font-size: 1.1em; }
+      .d-footer .copy { font-size: 11px; }
+      .d-footer .social a { font-size: 12px; }
+      .buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; }
     }
   </style>
 </head>