Do various tweaks to work better on mobile devices.

[remoteglot] / www / css / remoteglot.css

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index 6cd931a081547186c0cd82089cdc83006a8d9872..6009a24cd7b2d41cdf6203f5f7c91796f12274cb 100644 (file)
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -61,10 +61,35 @@ p {
        display: block;
        float: left;
        width: 400px;
        display: block;
        float: left;
        width: 400px;

-       height: 400px;
+       margin-right: 1em;
+       margin-bottom: 1em;
+       padding: 0;

 }
 #analysis {
        display: block;
        min-width: 400px;
        overflow: hidden;
 }
 }
 #analysis {
        display: block;
        min-width: 400px;
        overflow: hidden;
 }

+
+/* If the board is too wide for the screen, shrink it to fit,
+ * and then put the analysis below. */
+@media all and (max-width: 400px) {
+       #board {
+               width: 100%;
+               float: none;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}
+
+/* If there is almost space for the analysis, shrink the board a bit, too. */
+@media all and (min-width: 500px) and (max-width: 810px) {
+       #board {
+               float: left;
+               width: 50%;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}