src/Client/src/app/app.css

@@ -100,3 +100,64 @@
     margin: 20px;
     color: var(--mistox-border-light);
 }
+
+
+@media (max-width: 900px) {
+    
+    .top-bar {
+        display: block;
+        height: unset;
+    }
+
+    .top-bar-logo {
+        display: none;
+    }
+
+    .top-bar-buttons {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        margin: 0;
+        width: 100%;
+        height: unset;
+    }
+
+    .flex-right {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+
+    .nav-button {
+        width: 100%;
+        margin: 0;
+        margin-bottom: 10px;
+    }
+
+    .bottom-bar {
+        display: block;
+        height: unset;
+    }
+
+    .bottom-bar-buttons {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        margin: 0;
+        width: 100%;
+        height: unset;
+    }
+
+    .nav-button-bottom{
+        width: 100%;
+    }
+
+    .bottom-bar-logo {
+        display: none;
+    }
+
+    .mistox-logo {
+        display: block;
+    }
+
+    .bottom-bar-padding {
+        width: 100%;
+        text-align: center;
+    }
+}

src/Client/src/app/app.html

@@ -38,7 +38,7 @@
   <a class="bottom-bar-logo" href="https://mistox.com">
     <img src="img/mistox-logo.png" />
   </a>
-  <div class="bottom-bar-buttons flex-right bottom-bar-float">
+  <div class="bottom-bar-buttons flex-right mistox-logo bottom-bar-float">
     <div class="bottom-bar-padding">
       <span>Mistox LLC</span>
     </div>

src/Client/src/app/pages/home/home.component.css

@@ -8,7 +8,7 @@
 }
 
 .center-text h1 {
-    font-size: 100px;
+    font-size: 60px;
     margin: 20px 0;
     color: var(--mistox-text);
 }
@@ -79,3 +79,21 @@ hr {
 .border {
     border-bottom: solid 1px #000;
 }
+
+@media (max-width: 900px) {
+    .content-frame {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-auto-flow: unset;
+    }
+
+    .floating-frame {
+        width: calc(100% - 60px);
+        margin: 10px 10px;
+    }
+
+    .solution-frame {
+        width: calc(100% - 20px);
+        margin: 20px 10px;
+    }
+}

src/Client/src/app/pages/jobs/jobs.component.css

@@ -22,6 +22,7 @@ button {
 
 .tile-frame {
     display: grid;
+    grid-auto-flow: row;
     grid-template-columns: repeat(4, 1fr);
     column-gap: 20px;
     padding: 20px;
@@ -85,3 +86,22 @@ button {
     border-color: var(--Mistox-Black);
     color: var(--Mistox-Black);
 }
+
+@media (max-width: 1920px) {
+    .tile-frame{
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 1350px) {
+    .tile-frame{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 900px) {
+    .tile-frame{
+        grid-template-columns: repeat(1, 1fr);
+        grid-auto-flow: unset;
+    }
+}

src/Client/src/app/pages/jobs/jobs.component.html

@@ -1,6 +1,6 @@
 <!-- Avaliable Jobs -->
+<div class="tile-frame">
     @for (cur of JobListingPage; track cur.id){
-    <div class="tile-frame">
         <div class="tile">
             <div class="tile-title">
                 <h1>{{ cur.title }}</h1>
@@ -20,5 +20,5 @@
                 <button [routerLink]="['/jobs/viewer']"  [queryParams]="{ JobID: cur.id }" >VIEW LISTING</button>
             </div>
         </div>
-    </div>
     }
+</div>