diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index ea35d6be0edf2c3b506182d9981040a3fbbcefcf..6a936f6cf7cac42c603f1488a098cd484ee76d11 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -333,28 +333,27 @@ body > header {
     width: 80%;
 }
 
-#container {
-    width: 100%;
-    overflow: hidden;
-}
 #container #mainContent {
-    /* All the measurements here are relative to #sidebar's 13em width.
-       Leave enough space for it plus 1.5em margins on either side. */
-    position: relative;
-    left: 14.5em;
-    width: calc(100% - 16em);
     max-width: 50em;
     margin: 0;
     padding: 0;
     background: #ffffff;
+    flex: 1 1 auto;
 }
 #container #sidebar {
-    position: absolute;
-    width: 13em;
-    background-color: #ccd4a3;
-    /* Gives symmetry with the margin-top of the first h2.
-       1.25em font-size * 1.5em margin == 1.875em */
-    padding-bottom: 1.875em;
+  background-color: #ccd4a3;
+  padding: 1px 0.5rem 0.25rem;
+  flex: 1 0 15em;
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 30em) {
+  #container {
+    display: flex;
+  }
+  #container #sidebar {
+    margin-right: 1rem;
+  }
 }
 
 #container #sidebar li {
@@ -475,10 +474,17 @@ blockquote, div.quote /* div.quote is used by conservancy whitepaper */ {
     text-indent: 0;
     margin: .25em;
     min-width: 8%;
-    max-width: 30%;
     width: auto;
     box-shadow: 1px 1px 2px rgba(0,0,0,.3);
+    margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 30em) {
+  .picture-small {
+    max-width: 20rem;
+  }
 }
+
 .picture-small img {
    width: 100%;
 }