diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css
index 5092d2d..2fe7140 100644
--- a/_extensions/closeread/closeread.css
+++ b/_extensions/closeread/closeread.css
@@ -86,17 +86,13 @@
   transition: color 0.7s linear;
 }
 
-/* mobile sizing (bootstrap: xs) is always overlay-center */
+/* mobile sizing is always overlay-center */
 @media (max-width: 575.98px) {
-  .cr-section.sidebar-left,
-  .cr-section.sidebar-right,
   .cr-section.overlay-left,
   .cr-section.overlay-right,
   .cr-section.overlay-center {
     grid-template-columns: 1fr;
   }
-  .cr-section.sidebar-left .narrative-col,
-  .cr-section.sidebar-right .narrative-col,
   .cr-section.overlay-left .narrative-col,
   .cr-section.overlay-right .narrative-col,
   .cr-section.overlay-center .narrative-col {
@@ -104,9 +100,9 @@
     z-index: 1;
     margin-inline: auto;
     background-color: transparent;
+    max-width: var(--cr-narrative-overlay-max-width);
+    min-width: var(--cr-narrative-overlay-min-width);
   }
-  .cr-section.sidebar-left .narrative-col .narrative,
-  .cr-section.sidebar-right .narrative-col .narrative,
   .cr-section.overlay-left .narrative-col .narrative,
   .cr-section.overlay-right .narrative-col .narrative,
   .cr-section.overlay-center .narrative-col .narrative {
@@ -115,14 +111,39 @@
     padding: 0.3em 0.5em;
     border-radius: var(--cr-narrative-border-radius);
   }
-  .cr-section.sidebar-left .sticky-col,
-  .cr-section.sidebar-right .sticky-col,
   .cr-section.overlay-left .sticky-col,
   .cr-section.overlay-right .sticky-col,
   .cr-section.overlay-center .sticky-col {
     grid-column: 1;
   }
 }
+@media (max-width: 767.98px) {
+  .cr-section.sidebar-left,
+  .cr-section.sidebar-right {
+    grid-template-columns: 1fr;
+  }
+  .cr-section.sidebar-left .narrative-col,
+  .cr-section.sidebar-right .narrative-col {
+    grid-column: 1;
+    z-index: 1;
+    margin-inline: auto;
+    background-color: transparent;
+    max-width: var(--cr-narrative-overlay-max-width);
+    min-width: var(--cr-narrative-overlay-min-width);
+  }
+  .cr-section.sidebar-left .narrative-col .narrative,
+  .cr-section.sidebar-right .narrative-col .narrative {
+    background-color: var(--cr-narrative-background-color-overlay);
+    color: var(--cr-narrative-text-color-overlay);
+    padding: 0.3em 0.5em;
+    border-radius: var(--cr-narrative-border-radius);
+  }
+  .cr-section.sidebar-left .sticky-col,
+  .cr-section.sidebar-right .sticky-col {
+    grid-column: 1;
+  }
+}
+/* desktop sizing */
 .overlay-left,
 .overlay-center,
 .overlay-right {
diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss
index 7f3f138..8c85af2 100644
--- a/_extensions/closeread/closeread.scss
+++ b/_extensions/closeread/closeread.scss
@@ -145,10 +145,10 @@
 }
 
 
-/* mobile sizing (bootstrap: xs) is always overlay-center */
+/* mobile sizing is always overlay-center */
+
+// (switch to mobile sizing from overlay layouts at bootstrap xs)
 @media (max-width: 575.98px) {
-  .cr-section.sidebar-left,
-  .cr-section.sidebar-right,
   .cr-section.overlay-left,
   .cr-section.overlay-right,
   .cr-section.overlay-center {
@@ -159,6 +159,36 @@
       z-index: 1;
       margin-inline: auto;
       background-color: transparent;
+      max-width: var(--cr-narrative-overlay-max-width);
+      min-width: var(--cr-narrative-overlay-min-width);
+      
+      .narrative {
+        background-color: var(--cr-narrative-background-color-overlay);
+        color: var(--cr-narrative-text-color-overlay);
+        padding: 0.3em 0.5em;
+        border-radius: var(--cr-narrative-border-radius);
+      }
+    }
+
+    .sticky-col {
+      grid-column: 1;
+    }
+  }
+}
+
+// (sidebar layouts switch to overlay-center at a wider breakpoint: sm)
+@media (max-width: 767.98px) {
+  .cr-section.sidebar-left,
+  .cr-section.sidebar-right {
+    grid-template-columns: 1fr;
+    
+    .narrative-col {
+      grid-column: 1;
+      z-index: 1;
+      margin-inline: auto;
+      background-color: transparent;
+      max-width: var(--cr-narrative-overlay-max-width);
+      min-width: var(--cr-narrative-overlay-min-width);
       
       .narrative {
         background-color: var(--cr-narrative-background-color-overlay);
@@ -174,7 +204,7 @@
   }
 }
 
-// layouts for wider-than-mobile sizing
+/* desktop sizing */
 
 // overlay layouts use one column...
 .overlay-left,
diff --git a/docs/gallery/examples/auden-poem/index.qmd b/docs/gallery/examples/auden-poem/index.qmd
index 059a95a..e933618 100644
--- a/docs/gallery/examples/auden-poem/index.qmd
+++ b/docs/gallery/examples/auden-poem/index.qmd
@@ -10,7 +10,7 @@ format:
       narrative-text-color-sidebar: white
       narrative-font-family: 'Georgia, "Times New Roman", Times, serif'
       narrative-font-size: 1.25rem
-      narrative-sidebar-width: minmax(400px, 1fr)
+      narrative-sidebar-width: minmax(320px, 1fr)
       narrative-border-radius: 5px
       narrative-background-color-overlay: "#111111dd"
       narrative-background-color-sidebar: "#111111"
diff --git a/docs/gallery/examples/minards-map/index.qmd b/docs/gallery/examples/minards-map/index.qmd
index 2fbf3e6..c12257c 100644
--- a/docs/gallery/examples/minards-map/index.qmd
+++ b/docs/gallery/examples/minards-map/index.qmd
@@ -13,6 +13,7 @@ format:
       narrative-background-color-overlay: transparent
       narrative-background-color-sidebar: transparent
       section-background-color: transparent
+      narrative-sidebar-width: minmax(320px, 1fr)
       narrative-text-color-overlay: black
       narrative-font-family: 'et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif'
 ---