mobile considerations

webroot/styles/layout.css

@@ -49,8 +49,8 @@ header h1 {
 
 .left-col {
   width: calc(100vw - 24em);
-
 }
+
 #video-container {
   width: 100%;
   height: auto;
@@ -84,4 +84,57 @@ header h1 {
 }
 .no-chat .right-col {
   display: none;
+}
+
+@media screen and (max-width: 860px) {
+  #chat-container {
+    width: 20em;
+  }
+  .left-col {
+    width: calc(100vw - 20em);
+  }
+}
+
+@media screen and (max-width: 640px ) and (orientation: portrait) {
+  #main-content-container {
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 3em);
+  }
+
+  .main-cols {
+    width: 100vw;
+  }
+  .left-col {
+    flex-direction: column;
+    justify-content: stretch;
+  }
+  .right-col {
+    overflow: hidden;
+  }
+
+  
+  #info {
+    display: none;
+    overflow: auto;
+    height: auto;
+  }
+
+  #chat-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    height: auto;
+  }
+
+  .no-chat  .left-col {
+    height: 100%;
+  }
+  .no-chat  .right-col {
+    display: none;
+  }
+  .no-chat #info {
+    display: block;
+  }
+
 }