From 81add0b4fa048ec862d0f5d1c758a69226d646f9 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Mon, 9 Feb 2026 07:31:24 -0500
Subject: [PATCH] Compact footer for mobile: keep link columns side-by-side on
 narrow screens.

---
 .../static/theme/meta/css/meta.css            | 34 ++++++++++---
 remarkbox_theme_meta/templates/meta-base.j2   | 48 ++++++++++---------
 2 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/remarkbox_theme_meta/static/theme/meta/css/meta.css b/remarkbox_theme_meta/static/theme/meta/css/meta.css
index e1eb0a8..a9c8738 100644
--- a/remarkbox_theme_meta/static/theme/meta/css/meta.css
+++ b/remarkbox_theme_meta/static/theme/meta/css/meta.css
@@ -340,7 +340,13 @@ label.inline-label {
 
 .rb-footer-grid {
     display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 30px;
+}
+
+.rb-footer-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 40px;
 }
 
@@ -411,19 +417,35 @@ label.inline-label {
 }
 
 @media screen and (max-width:750px) {
-    .rb-footer-grid {
-        grid-template-columns: 1fr 1fr;
+    .rb-footer {
+        padding: 40px 20px 20px;
     }
-}
-
-@media screen and (max-width:568px) {
     .rb-footer-grid {
         grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    .rb-footer-nav {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 16px;
+    }
+    .rb-footer-group-title {
+        margin-bottom: 8px;
+    }
+    .rb-footer-links {
+        gap: 4px;
     }
     .rb-footer-ctas {
+        margin-top: 24px;
         flex-direction: column;
     }
     .rb-footer-ctas .button {
         text-align: center;
     }
+    .rb-footer-quote {
+        margin-top: 20px;
+    }
+    .rb-footer-bottom {
+        margin-top: 20px;
+    }
 }
diff --git a/remarkbox_theme_meta/templates/meta-base.j2 b/remarkbox_theme_meta/templates/meta-base.j2
index db4fb1a..d697310 100644
--- a/remarkbox_theme_meta/templates/meta-base.j2
+++ b/remarkbox_theme_meta/templates/meta-base.j2
@@ -143,29 +143,31 @@
       <a href="{{ request.marketing_url }}" class="rb-footer-logo">remarkbox</a>
       <p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
     </div>
-    <div class="rb-footer-group">
-      <span class="rb-footer-group-title">Product</span>
-      <nav class="rb-footer-links">
-        <a href="{{ request.app_url }}/setup">Setup</a>
-        <a href="{{ request.marketing_url }}/#plans">Plans</a>
-        <a href="{{ request.marketing_url }}/#remarkbox-demo">Demo</a>
-      </nav>
-    </div>
-    <div class="rb-footer-group">
-      <span class="rb-footer-group-title">Resources</span>
-      <nav class="rb-footer-links">
-        <a href="https://faq.remarkbox.com">FAQ</a>
-        <a href="https://meta.remarkbox.com">Meta</a>
-        <a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
-        <a href="https://pypi.org/project/remarkbox/">PyPi</a>
-      </nav>
-    </div>
-    <div class="rb-footer-group">
-      <span class="rb-footer-group-title">Company</span>
-      <nav class="rb-footer-links">
-        <a href="{{ request.marketing_url }}/privacy-policy.html">Privacy Policy</a>
-        <a href="{{ request.marketing_url }}/terms-of-service.html">Terms of Service</a>
-      </nav>
+    <div class="rb-footer-nav">
+      <div class="rb-footer-group">
+        <span class="rb-footer-group-title">Product</span>
+        <nav class="rb-footer-links">
+          <a href="{{ request.app_url }}/setup">Setup</a>
+          <a href="{{ request.marketing_url }}/#plans">Plans</a>
+          <a href="{{ request.marketing_url }}/#remarkbox-demo">Demo</a>
+        </nav>
+      </div>
+      <div class="rb-footer-group">
+        <span class="rb-footer-group-title">Resources</span>
+        <nav class="rb-footer-links">
+          <a href="https://faq.remarkbox.com">FAQ</a>
+          <a href="https://meta.remarkbox.com">Meta</a>
+          <a href="https://git.unturf.com/engineering/remarkbox/remarkbox">Source Code</a>
+          <a href="https://pypi.org/project/remarkbox/">PyPi</a>
+        </nav>
+      </div>
+      <div class="rb-footer-group">
+        <span class="rb-footer-group-title">Company</span>
+        <nav class="rb-footer-links">
+          <a href="{{ request.marketing_url }}/privacy-policy.html">Privacy Policy</a>
+          <a href="{{ request.marketing_url }}/terms-of-service.html">Terms of Service</a>
+        </nav>
+      </div>
     </div>
   </div>
   <div class="rb-footer-ctas">