Solve issue #44

The 'box' class overflow the window width for some screen size. This patch fix it using CSS media query.
HPC-workshops · Oct 1, 2013 · 1ad953e · 1ad953e
1 parent e83e2c9
commit 1ad953e
Showing 1 changed file with 10 additions and 1 deletion.
diff --git 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 {