From 3bc962071d1618ca1ba09e5c203532aefaf3b26e Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Tue, 26 Mar 2019 16:44:50 +0100
Subject: [PATCH] improving css for flex charts on mobile

---
 rowers/templates/flexchart3otw.html |  2 +-
 static/css/rowsandall2.css          |  1 +
 static/css/styles2.css              | 29 +++++++++++++++++++++--------
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/rowers/templates/flexchart3otw.html b/rowers/templates/flexchart3otw.html
index 0f5db1b5..4018f2b3 100644
--- a/rowers/templates/flexchart3otw.html
+++ b/rowers/templates/flexchart3otw.html
@@ -35,7 +35,7 @@
     
 <ul class="main-content">
   <li class="grid_4">
-    <div id="theplot" class="flexplot" style="min-width:300px;">
+    <div id="theplot" class="flexplot">
       {{ the_div|safe }}
     </div>
   </li>
diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index 35839e03..89587bf3 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -1005,6 +1005,7 @@ th.rotate > div > span {
   z-index: 10;
 }
 
+
 a.wh:link { 
     color: #e9e9e9;
 }
diff --git a/static/css/styles2.css b/static/css/styles2.css
index becf3231..2a8c9896 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -564,28 +564,28 @@
 
 
 
-@media  (min-height: 600px) {
+@media  only screen and (min-height: 600px) {
     .maxheight {
         max-height: 450px;
         overflow: scroll;
     }
 }
     
-@media  (min-height: 600px) {
+@media only screen and (min-height: 600px) {
     .maxheight {
         max-height: 450px;
         overflow: scroll;
     }
 }
     
-@media  (min-height: 800px) {
+@media only screen and (min-height: 800px) {
     .maxheight {
         max-height: 600px;
         overflow: scroll;
     }
 }
 
-@media  (min-height: 1000px) {
+@media only screen and (min-height: 1000px) {
     .maxheight {
         max-height: 800px;
         overflow: scroll;
@@ -593,7 +593,7 @@
 }
 
 
-@media  (max-width: 600px) {
+@media  only screen and (max-width: 600px) {
     nav a {
         font-size: 0px;
     }
@@ -601,9 +601,22 @@
     nav a i {
         font-size: 20px;
     }
+
+    #theplot .bk-grid-column {
+        display: none;
+    }
+
+    #theplot .bk-plot-layout {
+        position: auto;
+        width: 100%;
+        height: auto;
+        display: inline;
+    }
 }
 
-@media  (min-width: 450px) {
+
+
+@media only screen and (min-width: 450px) {
   .wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas: 
@@ -648,7 +661,7 @@
 }
 
 
-@media  (min-width: 768px) {
+@media only screen and (min-width: 768px) {
   .wrapper {
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
@@ -727,7 +740,7 @@
         page-break-after: avoid;
     }
 
-    ul, img {
+    ul, img, table {
         page-break-inside: avoid;
     }