From ba453a80c2a4f005e7375cc1628eaf07f4bc708f Mon Sep 17 00:00:00 2001
From: "Bradley M. Kuhn" <bkuhn@ebb.org>
Date: Thu, 5 Mar 2015 11:56:22 -0800
Subject: [PATCH] Avoid left floating dt's on small screens.

Set the min-width for the left-floating dt's to 550px, so that small
screens just get everything in one column.

Note that the formatting previously used is now moved purely to @media,
which I don't know how that will impact browsers that don't support
@media in CSS, but OTOH, I believe the graceful degradation is done
correctly here.
---
 www/conservancy/static/conservancy.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/www/conservancy/static/conservancy.css b/www/conservancy/static/conservancy.css
index f2096d8e..1354bb3f 100644
--- a/www/conservancy/static/conservancy.css
+++ b/www/conservancy/static/conservancy.css
@@ -327,6 +327,22 @@ body.conservancy-supporter #navbar ul li.supporter a
    font-size: 12px;
 }
 
+/* Make dl's ( such as for FAQ entries) look nice on screens, both big and small. */
+
+dl {
+    border: 3px double #ccc;
+    padding: 0.5em;
+}
+dt {
+    text-align: center;
+    margin: 0em 1em 0.5em 0.5em;
+    font-weight: bold;
+    color: green; }
+dd {
+    margin: 0 0 1.5em 2em;
+}
+
+@media only screen and (min-width: 550px) {
 dl {
     border: 3px double #ccc;
     padding: 0.5em;
@@ -334,14 +350,15 @@ dl {
 dt {
     float: left;
     clear: left;
+    text-align: center;
     width: 10em;
     margin: 0em 1em 0.5em 0.5em;
-    text-align: center;
     font-weight: bold;
     color: green; }
 dt:after {
     content: ":";
 }
 dd {
-    margin: 0 0 2em 11em;
+    margin: 0 0 2.5em 11em;
+}
 }