LIs now go inline for mobile

sidebar.php

@@ -19,6 +19,7 @@
  <li>ROM</li>
 </ul>
 
+<div class="hidden-mobile">
 <h3>PCBs</h3>
 <ul>
   <li>Coming Soon</li>
@@ -28,8 +29,15 @@
   <li>Coming Soon</li>
 </ul>
 <h2>DAVIAC-2</h2>
-<p> Coming Soon </p>
-
+  <ul>
+   <li>Coming Soon </li>
+  </ul>
 </div>
 
+<div class="shown-mobile">
+  <p>PCBs, Programming and DAVIAC-2 Coming Soon</p>
+</div>
+
+</div> <!-- sidebar -->
+
 

style.css

@@ -7,12 +7,20 @@
   display: grid;
   grid-template-areas:
     'header header'
-    'menu main'
-    'menu footer';
+    'sidebar main'
+    'sidebar footer';
   gap: 10px;
   padding: 10px;
 }
 
+.shown-mobile {
+	display: none;
+}
+
+.hidden-mobile {
+	display: content;
+}
+
 @media only screen and (max-width: 620px) {
   /* Mobile screens */
   .grid-container {
@@ -30,6 +38,18 @@
   }
   .sidebar {
 	  width: 94%;
+	  ul { 
+		  padding: 1px;
+	  }
+	  li {
+		  display: inline list-item;
+	  }
+  }
+  .hidden-mobile {
+	  display: none;
+  }
+  .shown-mobile {
+	  display: contents;
   }
 }