diff --git a/webgpu/lessons/resources/lesson.css b/webgpu/lessons/resources/lesson.css
index f4fb3de7..0df274e7 100644
--- a/webgpu/lessons/resources/lesson.css
+++ b/webgpu/lessons/resources/lesson.css
@@ -847,6 +847,26 @@ pre.prettyprint.lighttheme .fun { color: #900; }  /* function name */
   }
 }
 
+/* fixed size text */
+.fixed-size-text {
+  padding: 1em;
+  line-height: 1.2;
+  overflow: auto;
+  container-type: layout size;
+  container-name: fixed-size-text;
+}
+/*@container fixed-size-text (width < 570px) {*/
+@media (max-width: 570px) {
+  .fixed-size-text {
+    font-size: small;
+  }
+}
+@media (max-width: 425px) {
+  .fixed-size-text {
+    font-size: x-small;
+  }
+}
+
 /* ---- data table ---- */
 
 .data-table {
diff --git a/webgpu/lessons/webgpu-resizing-the-canvas.md b/webgpu/lessons/webgpu-resizing-the-canvas.md
index 03aa29b6..f7d51fca 100644
--- a/webgpu/lessons/webgpu-resizing-the-canvas.md
+++ b/webgpu/lessons/webgpu-resizing-the-canvas.md
@@ -285,7 +285,7 @@ with 3 children, each set be the 33% the width of their parent
 On one of my machines, with a default (un-zoomed) browser window, I get these
 results
 
-<pre style="padding: 1em">
+<pre class="fixed-size-text">
 devicePixelRatio: 2
 --------------- #left ---------------
                  inlineSize: 99.65625
@@ -333,7 +333,7 @@ If we add that measurement to our example it gives us the actual answer
 
 On the machine I used for the results above I get these results
 
-<pre style="padding: 1em">
+<pre class="fixed-size-text">
 devicePixelRatio: 2
 --------------- #left ---------------
                           inlineSize: 99.65625