Update css on information pages to make it completely mobile friendly.

views/informationPages/information.css

@@ -58,22 +58,47 @@ HELP PAGE
         font-size: 20px;
     }
 
-@media screen and (max-width: 600px){
-    .helpMenu{
-        position: static;
-        padding: 0;
-    }
+@media screen and (max-width: 1200px){
+    @media (orientation: portrait){
+        .helpMenu{
+            position: static;
+            padding: 0;
+        }
 
-    .helpContent{
-        padding: 0;
-        width: 90%;
-    }
+        .helpContent{
+            padding: 0;
+            width: 90%;
+        }
 
-    .helpContent h2, .helpContent h3, .helpContent h4{
-        text-align: center;
+        .helpContent h2, .helpContent h3, .helpContent h4{
+            text-align: center;
+        }
+
+        .helpContent p{
+            text-align: justify;
+        }
+
+        .content{
+            width: 90%;
+        }
     }
 
-    .helpContent p{
-        text-align: justify;
+    @media (orientation: landscape){
+        body{
+            align-items: flex-end;
+        }
+
+            .helpMenu{
+                position: absolute;
+                margin: 0;
+                padding: 10px 25px;
+                width: 25%;
+            }
+
+            .helpContent{
+                margin: 0;
+                padding: 10px;
+                width: 65%;
+            }
     }
 }

views/shared/header.ejs

@@ -1,17 +1,10 @@
 <div class="header">
     <a class="headerStart" href="/" >
         <img src="/shared/images/logo.png" alt="Subline">
-        <div class='headerLogo mobileHide'>THE SUBLINE</div>
+        <div class='headerLogo'>THE SUBLINE</div>
     </a>
 
-    <a class="mobileHomeButton" href="/">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-            <polyline points="9 22 9 12 15 12 15 22"></polyline>
-        </svg>
-    </a>
-
-    <div class="headerEnd mobileHide">
+    <div class="headerEnd">
         <a id="helpLink" class="headerHide" href="/help">HELP</a>
 
         <a id="privacyPolicyLink" class="headerHide" href="/privacy">PRIVACY POLICY</a>

views/shared/shared.css

@@ -369,6 +369,23 @@ Banner
         font-size: 15px;
     }
 
+    .header{
+        height: 30px;
+    }
+
+        .headerStart{
+            margin-left: 10px;
+        }
+
+        .headerEnd{
+            font-size: 8px;
+        }
+
+        .headerLogo{
+            white-space: nowrap;
+            font-size: 10px;
+        }
+
     .truncateLong{
         max-width: 100px;
         white-space: nowrap;
@@ -383,22 +400,6 @@ Banner
     .headerStart{
         width: 0;
     }
-
-        .mobileHomeButton{
-            display: flex;
-            align-items: center;
-            margin: auto 25px auto 0;
-            background: rgb(255, 99, 107);
-            box-shadow: 0 0 10px rgb(255, 99, 107);
-            border-radius: 25px;
-            border: none;
-            color: white;
-            padding: 15px;
-        }
-
-            .mobileHomeButton svg{
-                margin: auto;
-            }
 }
 
 label {