improving css for flex charts on mobile

static/css/rowsandall2.css

@@ -1005,6 +1005,7 @@ th.rotate > div > span {
   z-index: 10;
 }
 
+
 a.wh:link { 
     color: #e9e9e9;
 }

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;
     }