From 69e26fe5d124ff810fce8d4eb2b4116f6ce7ae83 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Mon, 26 May 2025 20:51:18 -0400
Subject: [PATCH] Center commentary container and improve responsive layout

Add max-width constraint and auto margins to center the commentary
container. Update mobile and tablet breakpoints to use consistent
centering approach and adjust padding values.
---
 kjvstudy_org/static/style.css | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css
index c259e73..22e5484 100644
--- a/kjvstudy_org/static/style.css
+++ b/kjvstudy_org/static/style.css
@@ -1223,6 +1223,9 @@ html,
   padding: 2rem;
   box-sizing: border-box;
   font-family: 'Crimson Text', 'Times New Roman', serif;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Commentary-specific container overrides */
@@ -1471,11 +1474,13 @@ html,
 
 /* Mobile styles for commentary */
 @media (max-width: 768px) {
-    .commentary-container {
-        margin-left: 0 !important;
-        width: 100% !important;
-        padding: 1rem;
-    }
+  .commentary-container {
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 0.5rem;
+  }
 
     .commentary-breadcrumb,
     .commentary-navigation {
@@ -1571,11 +1576,13 @@ html,
 
 /* Tablet responsive tooltips */
 @media (min-width: 769px) and (max-width: 1024px) {
-    .commentary-container {
-        margin-left: 0 !important;
-        width: 100% !important;
-        padding: 1.5rem;
-    }
+  .commentary-container {
+    margin-left: auto !important;
+    margin-right: auto !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 1rem;
+  }
 
     .commentary-breadcrumb,
     .commentary-navigation {