diff --git a/swc.css b/swc.css
index fc9866e9b4d995c03f7b1c6b3652ab149436adfc..59bab5a6f42fc83a0501997ada2cfdb2a364de45 100644
--- a/swc.css
+++ b/swc.css
@@ -102,7 +102,6 @@ div.banner a img {
 
 /* Explanatory call-out boxes. */
 div.box {
-    width: 54em;
     background-color: mistyrose;
     display: block;
     margin-left: auto;
@@ -115,6 +114,16 @@ div.box {
     outline-width: 1px;
     outline-style: solid;
 }
+@media (max-width: 700px) {
+    div.box {
+        width: 80%;
+    }
+}
+@media (min-width: 700px) {
+    div.box {
+        width: 54em;
+    }
+}
 
 /* Level 2 headings inside pages. */
 div.content div h3 {