diff --git a/frontends/ycdl_flask/static/css/common.css b/frontends/ycdl_flask/static/css/common.css
index f4d7bf0..9cbbb07 100644
--- a/frontends/ycdl_flask/static/css/common.css
+++ b/frontends/ycdl_flask/static/css/common.css
@@ -12,6 +12,22 @@
     --color_highlight: rgba(255, 255, 255, 0.5);
 }
 
+@media screen and (min-width: 800px)
+{
+    :root
+    {
+        --wide: 1;
+    }
+}
+
+@media screen and (max-width: 800px)
+{
+    :root
+    {
+        --narrow: 1;
+    }
+}
+
 .hidden
 {
     display: none !important;
@@ -104,6 +120,9 @@ pre
     grid-auto-rows: min-content;
     grid-gap: 8px;
 
+    /*
+    8px all around except the top, where the header already has a margin.
+    */
     margin: 8px;
     margin-top: 0;
 }
diff --git a/frontends/ycdl_flask/static/js/common.js b/frontends/ycdl_flask/static/js/common.js
index 62b6074..0714281 100644
--- a/frontends/ycdl_flask/static/js/common.js
+++ b/frontends/ycdl_flask/static/js/common.js
@@ -453,6 +453,18 @@ function init_all_tabbed_container()
     }
 }
 
+common.is_narrow_mode =
+function is_narrow_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--narrow").trim() === "1";
+}
+
+common.is_wide_mode =
+function is_wide_mode()
+{
+    return getComputedStyle(document.documentElement).getPropertyValue("--wide").trim() === "1";
+}
+
 common.tabbed_container_switcher =
 function tabbed_container_switcher(event)
 {