live fix mobile/tablet

themes/pelican-blue/static/css/large.css

@@ -24,7 +24,7 @@ h1, h2 {
 }
 
 .latest
-{-
+{
   padding: 10px 10px;
   border-bottom: 1px solid #eee;
 }
@@ -63,7 +63,7 @@ body > article, footer
   line-height: 1.6em;
   display: block;
   margin: auto 5px auto 285px;
-  padding: 10px 5px 10px;*/
+  padding: 10px 5px 10px;
 }
 
 article ol.posts
@@ -262,25 +262,23 @@ img {
 #live {
     display: flex;
     flex-flow: row nowrap;
+    flex-direction: column;
     justify-content: space-between;
     align-items: stretch;
     height: 75vh;
 }
 
 #embedded-video {
-    display: flex;
-    flex: 7;
 }
 
-#embedded-chat {
-    padding: 2px;
-    display: flex;
-    flex: 2;
+#embedded-chat, #embedded-video {
+  width: 50%;
 }
 
 #live iframe {
     border: 0px;
     flex: 1;
+  width: 100%
 }
 
 #footlinks {
@@ -290,9 +288,7 @@ img {
 
 #footlinks ul
 {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
+  column-count: 2;
   list-style: none;
   padding: 0 50px;
   margin: 0 0;
@@ -301,21 +297,17 @@ img {
 #footlinks li
 {
   display: block;
-  flex: 0 1 auto;
+  width: 200px;
+  min-height: 50px;
   margin: 0px 5px;
-  vertical-align: middle;
 }
 
 #footlinks a
 {
   -webkit-transition: 200ms;
-     -moz-transition: 200ms;
-      -ms-transition: 200ms;
-       -o-transition: 200ms;
           transition: 200ms;
   display: block;
   width: 10rem;
-  height: 1.5rem;
   padding: 0.77273rem 0rem;
   background-color: #3a7c78;
   color: white;
@@ -332,3 +324,19 @@ img {
   border-color: #73d08a;
   color: #3a7c78;
 }
+
+@media screen and (max-width: 1024px) {
+  #live iframe {
+    min-height: 260px;
+  }
+  #embedded-chat, #embedded-video {
+  	width: 100%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #live iframe {
+    height: 75vh;
+  }
+  
+}