switched CSS to flexbox

homepage/style.css

@@ -74,6 +74,18 @@ button:hover {
   color: blue;
 }
 
+.row {
+  display: flex;
+}
+
+.centered {
+  text-align: center;
+  display: block;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .banner {
   padding-top: 1px;
   height: 8%;
@@ -103,14 +115,6 @@ button:hover {
   font-size: x-large;
 }
 
-.italic {
-    -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
-    -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
-    -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
-    -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
-    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(20deg, 0deg);
-}
-
 .logo img {
   position: absolute;
   top: 0;
@@ -120,26 +124,25 @@ button:hover {
 
 .topnav {
   background-color: rgb(159, 226, 155);
-  display: block;
+  display: flex;
-  width: 85%;
+  flex: 65%;
+  width: 65%;
+  justify-content: space-between;
   margin-left: auto;
   margin-right: auto;
 }
 
 .topnav form {
-  display: block;
+  margin: 0;
-  width: 80%;
+  padding: 0;
-  margin-left: auto;
-  margin-rigth: auto;
 }
 
 .topnav button {
   background-color: transparent;
-  display: block;
   text-align: center;
   padding: 14px 16px;
-  float: left;
   width: auto;
+  height: auto;
 }
 
 .topnav button:hover {
@@ -152,7 +155,6 @@ button:hover {
   color: white;
 }
 
-/* Hide the link that should open and close the topnav on small screens */
 .topnav .icon {
   display: none;
 }
@@ -166,10 +168,6 @@ button:hover {
   width: 75%;
 }
 
-.overview table {
-  width: 20%;
-}
-
 .overview th {
   background-color: rgb(219, 255, 235);
   border: 2px solid black;
@@ -181,36 +179,28 @@ button:hover {
   vertical-align: middle;
 }
 
-.overview img {
+.overview div img {
-  display: block;
   max-height: 100%;
-  margin-left: 25%;
+  display: flex;
-  margin-right: 10%;
+  justify-content: center;
-}
-
-.overview span {
-  width: auto;
-  margin-right: 20%;
-  margin-left: auto;
-}
-
-.overview span video {
-  width: 100%;
-  padding: 0;
-}
-
-.overview span table {
-  width: 50%;
-  margin-right: 25%;
-}
-
-.overview span td {
-  padding: 1;
-}
-
-.overview span img {
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
+}
+
+.overview-stats {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+}
+
+.left-column {
+  flex: 10%;
+  padding-left: 10px;
+}
+
+.right-column {
+  flex: 90%;
+  margin-right: 10%;
 }
 
 .stats td {
@@ -221,11 +211,6 @@ button:hover {
   height: auto;
 }
 
-.column {
-  width: auto;
-  height: 100%;
-}
-
 .stats button:hover {
   color: blue;
 }
@@ -235,10 +220,6 @@ button:hover {
   color: blue;
 }
 
-.left {
-  float: left;
-}
-
 .history table,.history img {
   width: auto;
   margin-left: auto;
@@ -334,14 +315,6 @@ button:hover {
   width:50%
 }
 
-.centered {
-  text-align: center;
-  display: block;
-  width: auto;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .full {
   width:100%;
 }
@@ -365,23 +338,16 @@ button:hover {
   width: 20%;
 }
 
-body::-webkit-scrollbar {
+#body::-webkit-scrollbar {
-  display:none
+#  display:none
-}
+#}
 
 @media screen and (max-width: 1290px) {
-  .overview img {
-    display: block;
-    max-height: 100%;
-    margin-left: 10%;
-    margin-right: auto;
-  }
-
   .column1,.column2,.column3,.column4 {
     height: 90%
   }
-  .left {
+  .overview {
-    display: none;
+    width: 100%;
   }
 }
 @media screen and (max-width: 1000px) {
@@ -406,8 +372,11 @@ body::-webkit-scrollbar {
     padding: 12px;
     background-color: rgb(219, 255, 235);
   }
+  .topnav {
+    flex: 100%;
+    width: 100%;
+  }
   .topnav button {display: none;}
-  .topnav button {width: 50%;}
   .topnav button.icon {
     padding: 0;
     margin: 0;
@@ -416,23 +385,6 @@ body::-webkit-scrollbar {
     margin-left: auto;
     margin-right: auto;
   }
-  .topnav form {
-    width: 100%;
-  }
-  .overview span {
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .overview span img,.overview span table,.overview img {
-    margin: 0;
-    width: 100%;
-  }
-  .overview img {
-    display: block;
-    max-height: 100%;
-    margin-left: 5%;
-    margin-right: auto;
-  }
   .banner {
     height: auto;
   }
@@ -452,12 +404,19 @@ body::-webkit-scrollbar {
     display: block;
     text-align: center;
   }
-  .left {
+  .overview span {
     display: none;
   }
+  .right-column {
+    flex: 100%;
+    margin: 0;
+  }
+  img {
+    max-width: 100%;
+  }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 800px) {
   .column1, .column3 {
     width: 100%;
   }
@@ -495,8 +454,9 @@ body::-webkit-scrollbar {
     width: 100%;
   }
   .topnav {
-    margin-left:auto;
+    flex: 100%;
-    margin-right:auto;
+    width: 100%;
+    flex-direction: column;
   }
   .topnav button { 
     font-size: large;
@@ -515,19 +475,8 @@ body::-webkit-scrollbar {
   .topnav.responsive button {
     display: block;
   }
-  .overview span{
+  .overview .column .left {
-    margin-right: auto;
+    display: none;
-    margin-left: auto;
-  }
-  .overview span img,.overview span table,.overview img {
-    margin: 0;
-    width: 100%;
-  }
-  .overview img {
-    display: block;
-    max-height: 100%;
-    margin-left: 5%;
-    margin-right: auto;
   }
   .version {display:none;}
   .left {

scripts/overview.php

@@ -70,9 +70,10 @@ $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
   <title>Overview</title>
 </head>
 <div class="overview">
-<div class="column left">
+<div class="overview-stats">
-<table style="height: 80%;"><tr><td style="background-color: transparent; border:none;vertical-align: middle;">
+<span>
-    <table>
+<div class="left-column">
+<table>
   <tr>
     <th>Total</th>
     <td><?php echo $totalcount['COUNT(*)'];?></td>
@@ -99,9 +100,10 @@ $totalspeciestally = $result6->fetchArray(SQLITE3_ASSOC);
     <td><button type="submit" name="view" value="Species Stats"><?php echo $totalspeciestally['COUNT(DISTINCT(Com_Name))'];?></button></td>
     </form>
   </tr>
-    </table>
+</table>
-</td></tr></table>
 </div>
+</span>
+<div class="right-column">
 <?php
 if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
   echo "<img src=\"/Charts/$chart?nocache=time()\">";
@@ -109,8 +111,7 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
   echo "<p>No Detections For Today</p>";
 }
 ?>
-<span>
+<table>
-    <table>
   <h3>Most Recent Detection: <span style="font-weight: normal;"><?php echo $mostrecent['Date']." ".$mostrecent['Time'];?></span></h3>
   <tr>
     <td>
@@ -122,8 +123,8 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
         <video controls poster="<?php echo $filename.".png";?>" preload="none" title="<?php echo $filename;?>"><source src="<?php echo $filename;?>"></video></td>
     </form>
   </tr>
-    </table>
+</table>
-    <h3 class="centered">Currently Analyzing</h3>
+<h3>Currently Analyzing</h3>
-<img class="centered" src='/spectrogram.png?nocache=<?php echo time();?>' >
+<img src='/spectrogram.png?nocache=<?php echo time();?>' >
-</span>
+</div>
-</html>
+</div>