diff --git a/_extensions/closeread/closeread.css b/_extensions/closeread/closeread.css
index e0d36a9..038158c 100644
--- a/_extensions/closeread/closeread.css
+++ b/_extensions/closeread/closeread.css
@@ -15,7 +15,7 @@
 }
 .cr-section .narrative-col .trigger {
   padding-block: 45svh;
-  padding-inline: 1em;
+  padding-inline: 24px;
 }
 .cr-section .narrative-col .trigger p {
   margin-bottom: 0;
@@ -113,6 +113,7 @@
   grid-column: 1;
   z-index: 1;
   transition: opacity 0.5s ease-in-out;
+  max-width: 527.98px;
 }
 .overlay-left .narrative-col .narrative,
 .overlay-center .narrative-col .narrative,
@@ -129,17 +130,15 @@
 }
 
 .overlay-left .narrative-col {
-  margin-inline-start: 5%;
-  margin-inline-end: 65%;
+  justify-self: start;
 }
 
 .overlay-center .narrative-col {
-  margin-inline: 30%;
+  justify-self: center;
 }
 
 .overlay-right .narrative-col {
-  margin-inline-start: 65%;
-  margin-inline-end: 5%;
+  justify-self: end;
 }
 
 .sidebar-left {
diff --git a/_extensions/closeread/closeread.css.map b/_extensions/closeread/closeread.css.map
index 2179284..5cefc20 100644
--- a/_extensions/closeread/closeread.css.map
+++ b/_extensions/closeread/closeread.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAKN;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE,YACE;;AAGJ;EACE,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AAEA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAMJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAKJ;AAEA;EAEE;AAEA;AAAA;EAEA;EACA;EAEA;EACA;EAGA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EAGA;;AAGA;EACE;EAEA;;AAGF;EACE;;;AAKJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE","file":"closeread.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["closeread.scss"],"names":[],"mappings":"AACA;AAGA;AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAKN;EACE;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAGA;EAEA,YACE;;AAMJ;EACE,YACE;;AAGJ;EACE,YACE;;AAKJ;EACE;;AAIA;EACE;EAEA,YACE;;AAGF;EACE;EAEA,YACA;;AAMJ;EACE;EAEA;;AAGA;EACE;EAEA;;AAIF;EACE;EAEA;;;AASZ;AACA;EACE;AAAA;AAAA;AAAA;AAAA;IAKE;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;IACE;;;AAQN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIJ;AAAA;AAAA;EACE;;;AAMF;EACE;;;AAIF;EACE;;;AAIF;EACE;;;AAMJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAGJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKJ;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;;AAKJ;AAEA;EAEE;AAEA;AAAA;EAEA;EACA;EAEA;EACA;EAGA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EAEE;EAGA;EACA;EAGA;EAEA;EACA;EAGA;;AAGA;EACE;EAEA;;AAGF;EACE;;;AAKJ;AAKE;EACE;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAEA;EACE;;;AAOR;AAII;EACE;EACA;;AAEA;EACE","file":"closeread.css"}
\ No newline at end of file
diff --git a/_extensions/closeread/closeread.js b/_extensions/closeread/closeread.js
index 6bb6af2..4c71d72 100644
--- a/_extensions/closeread/closeread.js
+++ b/_extensions/closeread/closeread.js
@@ -58,101 +58,109 @@ document.addEventListener("DOMContentLoaded", () => {
   // collect all sticky elements
   const allStickies = Array.from(document.querySelectorAll(".sticky"));
   
-  
   // === Set up scrolling event listeners === //
-  // scrollama() is accessible because scrollama.min.js is attached via closeread.lua
+  // scrollama() is accessible because scrollama.min.js is attached
+  // via closeread.lua
+  const triggerScrollerConfig = {
+    step: triggerSelector,
+    offset: 0.5,
+    progress: true,
+    debug: debugMode
+  }
+  const progressScrollerConfig = {
+    step: progressBlockSelector,
+    offset: 0.5,
+    progress: true,
+    debug: debugMode
+  }
+
+  function crTriggerStepEnter(trigger) {
+    focusedStickyName = trigger.element.getAttribute("data-focus-on")
+        
+    // update ojs variables
+    ojsTriggerIndex?.define("crTriggerIndex", trigger.index)
+    ojsStickyName?.define("crActiveSticky", focusedStickyName)
+      
+    updateStickies(allStickies, focusedStickyName, trigger)
+  }
+  
+  function crTriggerStepProgress(trigger) {
+    ojsTriggerProgress?.define("crTriggerProgress", trigger.progress)
+    ojsDirection?.define("crDirection", trigger.direction)
+  }
   
+  function crProgressStepEnter(progressBlock) {
+    ojsProgressBlock?.define("crProgressBlock", progressBlock.progress)
+  }
+  
+  // set up scrollers on document load, and reset them when window zoom changes
+  // (they seem to misbehave on zoom change: see issue #101)
+
   // primary scroller
-  const triggerScroller = scrollama();
+  const triggerScroller = scrollama()
   triggerScroller
-    .setup({
-      step: triggerSelector,
-      offset: 0.5,
-      progress: true,
-      debug: debugMode
-    })
-    .onStepEnter((trigger) => {
-      
-      focusedStickyName = trigger.element.getAttribute("data-focus-on");
-      
-      // update ojs variables
-      ojsTriggerIndex?.define("crTriggerIndex", trigger.index);
-      ojsStickyName?.define("crActiveSticky", focusedStickyName);
-        
-      updateStickies(allStickies, focusedStickyName, trigger);
-      
-    })
-    .onStepProgress((trigger) => {
-      
-      // update ojs variables
-      ojsTriggerProgress?.define("crTriggerProgress", trigger.progress);
-      ojsDirection?.define("crDirection", trigger.direction);
-      
-    });
+    .setup(triggerScrollerConfig)
+    .onStepEnter(crTriggerStepEnter)
+    .onStepProgress(crTriggerStepProgress)
     
-    // secondary scroller used for making progress blocks
-    const progressBlockScroller = scrollama();
-    progressBlockScroller
-      .setup({
-        step: progressBlockSelector,
-        offset: 0.5,
-        progress: true,
-        debug: debugMode
-      })
-      .onStepProgress((progressBlock) => {
-      // update ojs variable
-      ojsProgressBlock?.define("crProgressBlock", progressBlock.progress);
-    });
+  // secondary scroller used for making progress blocks
+  const progressBlockScroller = scrollama()
+  progressBlockScroller
+    .setup(progressScrollerConfig)
+    .onStepProgress(crProgressStepEnter)
+
+  window.addEventListener("resize", (event) => {
+    setTimeout(() => triggerScroller.resize(), 1000)
+    setTimeout(() => progressBlockScroller.resize(), 1000)
+  })
+
+  // === Hotkey Listeners === //
+  // Add a listener for scrolling between new triggers
+  let currentIndex = -1; // Start before the first element
+  
+  function scrollToNewTrigger(direction) {
+    const triggers = document.querySelectorAll('.new-trigger');
     
-    // Add a listener for scrolling between new triggers
-    let currentIndex = -1; // Start before the first element
+    if (triggers.length === 0) return; // do nothing if there's no triggers
     
-    function scrollToNewTrigger(direction) {
-      const triggers = document.querySelectorAll('.new-trigger');
-      
-      if (triggers.length === 0) return; // do nothing if there's no triggers
-      
-      if (direction === "next") {
-        if (currentIndex >= triggers.length - 1) return; // exit if at end
-        currentIndex += 1;
-      }
-      
-      if (direction === "previous") {
-        if (currentIndex === 0) return; // exit if at start
-        currentIndex -= 1;
-      }
-      
-      const nextTrigger = triggers[currentIndex];
-      nextTrigger.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    if (direction === "next") {
+      if (currentIndex >= triggers.length - 1) return; // exit if at end
+      currentIndex += 1;
     }
     
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'ArrowRight') {
-          scrollToNewTrigger("next");
-      }
-      if (event.key === 'ArrowLeft') {
-          scrollToNewTrigger("previous");
-      }
-    });
+    if (direction === "previous") {
+      if (currentIndex === 0) return; // exit if at start
+      currentIndex -= 1;
+    }
+    
+    const nextTrigger = triggers[currentIndex];
+    nextTrigger.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+  
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowRight') {
+        scrollToNewTrigger("next");
+    }
+    if (event.key === 'ArrowLeft') {
+        scrollToNewTrigger("previous");
+    }
+  });
 
- });
- 
-// === Other Hotkey Listeners === //
-
-// toggle presentation mode
-document.addEventListener('keydown', (event) => {
-  const crSections = document.querySelectorAll('.cr-section');
-  crSections.forEach((el) => {
-    if (event.key === "p") {
-      if (el.classList.contains("presentation-mode")) {
-          el.classList.remove("presentation-mode");
-      } else {
-          el.classList.add("presentation-mode");
+  // toggle presentation mode
+  document.addEventListener('keydown', (event) => {
+    const crSections = document.querySelectorAll('.cr-section');
+    crSections.forEach((el) => {
+      if (event.key === "p") {
+        if (el.classList.contains("presentation-mode")) {
+            el.classList.remove("presentation-mode");
+        } else {
+            el.classList.add("presentation-mode");
+        }
       }
-    }
+    });
   });
-});
 
+ });
  
  
 //===============//
@@ -393,4 +401,3 @@ function getBooleanConfig(metaFlag) {
     .querySelector("meta[" + metaFlag + "]")?.getAttribute(metaFlag)
   return option === "true"
 }
-
diff --git a/_extensions/closeread/closeread.scss b/_extensions/closeread/closeread.scss
index dda101d..a6897e4 100644
--- a/_extensions/closeread/closeread.scss
+++ b/_extensions/closeread/closeread.scss
@@ -21,7 +21,7 @@
 
     .trigger {
       padding-block: 45svh;
-      padding-inline: 1em;
+      padding-inline: 24px;
 
       p {
         margin-bottom: 0; // override bootstrap rule
@@ -115,7 +115,6 @@
 
 
 /* mobile sizing (bootstrap: xs) is always overlay-center */
-//@media (max-width: 575.98px) {
 @media (max-width: 575.98px) {
   .cr-section.sidebar-left,
   .cr-section.sidebar-right,
@@ -155,6 +154,7 @@
     grid-column: 1;
     z-index: 1;
     transition: opacity 0.5s ease-in-out;
+    max-width: 527.98px;
     
     .narrative {
       background-color: rgba(17, 17, 17, .85);
@@ -172,19 +172,17 @@
 // ... with inline margins set for narrative content depending on side
 .overlay-left {
   .narrative-col {
-    margin-inline-start: 5%;
-    margin-inline-end: 65%;
+    justify-self: start;
   }
 }
 .overlay-center {
   .narrative-col {
-    margin-inline: 30%;
+    justify-self: center;
   }
 }
 .overlay-right {
   .narrative-col {
-    margin-inline-start: 65%;
-    margin-inline-end: 5%;
+    justify-self: end;
   }
 }
 
diff --git a/docs/index-styles.css b/docs/index-styles.css
index aac1229..63f5155 100644
--- a/docs/index-styles.css
+++ b/docs/index-styles.css
@@ -1,4 +1,11 @@
 .cr-section {
-  font-size: 1.4em;
   background-color: rgba(39, 128, 227, 1);
-}
\ No newline at end of file
+}
+
+.cr-section .narrative-col {
+  font-size: 1.4em;
+}
+
+.cr-section .sticky-col {
+  font-size: 0.6em;
+}
diff --git a/docs/index.qmd b/docs/index.qmd
index 9da9849..c239b51 100644
--- a/docs/index.qmd
+++ b/docs/index.qmd
@@ -40,7 +40,7 @@ Step three: flag an element to become a sticky. [@cr-doc]{highlight="14-18"}
 Step four: create a trigger to make the sticky appear. [@cr-doc]{highlight="12"}
 :::
 
-:::{#cr-doc filename="myfirstcr.qmd"}
+:::{#cr-doc filename="myfirstcr.qmd" .scale-to-fill}
 ````markdown
 ---
 title: My First Closeread