Make the mobile layout better

src/App.css

@@ -35,3 +35,9 @@
 #appContainer a:visited{
     color: rgb(67, 173, 255);
 }
+
+@media only screen and (max-width: 600px) {
+    #projectsContainer{
+        margin: 10px 5px 30px 5px;
+    }
+}

src/Portfolio.css

@@ -3,18 +3,10 @@ body{
     margin: 0;
     font-family: 'Source Sans Pro', sans-serif;
     scroll-behavior: smooth;
-    background: ;
 }
 
 #headerContainer{
 
-    /* Make the header a fixed sidebar. */
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: inherit;
-    height: 100vh;
-
     /* Background Gradient */
     background-size: auto, 150%;
     background: linear-gradient(
@@ -29,7 +21,7 @@ body{
 }
 
 header{
-    text-align: right;
+    text-align: center;
     padding: 20% 10%;
     color: rgb(186, 181, 171);
     line-height: 1.8em;
@@ -62,4 +54,20 @@ header a:hover{
     background: #181A1B;
     margin: 0;
     min-height: 100vh;
-}
+}
+
+@media only screen and (min-width: 600px) {
+    #headerContainer {
+
+        /* Make the header a fixed sidebar. */
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: inherit;
+        height: 100vh;
+    }
+
+    header{
+        text-align: right;
+    }
+}

src/Portfolio.tsx

@@ -16,7 +16,7 @@ function Portfolio() {
                 <title>Lucas Winther Portfolio</title>
             </Helmet>
             <Grid container spacing={0}>
-                <Grid item xs={5} id={"headerContainer"}>
+                <Grid item xs={12} sm={5} id={"headerContainer"}>
                     <header>
                         <img alt={"Lucas Winther"} src='images/avatar.png' />
                         <p>
@@ -35,7 +35,7 @@ function Portfolio() {
                 {/* I dont know why this grid is needed, but the first grid apparently doesn't register correctly.*/}
                 <Grid item xs={5}>
                 </Grid>
-                <Grid item xs={7} id={"appContainer"}>
+                <Grid item xs={12} sm={7} id={"appContainer"}>
                     <App />
                 </Grid>
             </Grid>