header design tweaked for mobile

webpage/index.html

@@ -25,13 +25,13 @@ <h1>Zach Magloughlin</h1>
                 <p> [email protected] </p>
 
                 <div id="links">
-                    <div class="column" id="left">
+                    <div class="column">
                         <img src="./images/icons/linkedin.png" /> <a href="https://www.linkedin.com/in/zach-magloughlin/" target="_blank">LinkedIn</a>
                     </div>
-                    <div class="column" id="middle">
+                    <div class="column">
                         <img src="./images/icons/github.png" /> <a href="https://github.com/ZachMc21" target="_blank">GitHub</a>
                     </div>
-                    <div class="column" id="right">
+                    <div class="column">
                         <img src="./images/icons/hackerrank.png" /> <a href="https://www.hackerrank.com/profile/magloughlin_zach" target="_blank">HackerRank</a>
                     </div>
                 </div>

webpage/partials/_global.scss

@@ -12,4 +12,17 @@ body {
 #main {
     margin: 0 auto;
     width: 80%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+    html {
+        font-size: 12px;
+    }
+}
+//Tablet & Desktop
+@media (min-width: 481px) {
+    html {
+        font-size: 16px;
+    }
 }

webpage/partials/_header.scss

@@ -45,7 +45,7 @@
     font-size: 1.5rem;
 }
 #links .column img {
-    max-width: 0.8em;
+    max-width: 0.8rem;
     height: auto;
 }
 
@@ -78,4 +78,36 @@ a:visited {
 }
 #whoami p ~ p {
     margin-top: 2%;
+}
+
+//Mobile
+@media (max-width: 480px) {
+    //Adjust font sizes to avoid overflow
+    #title_inner h1 {
+        font-size: 2.5rem;
+    }
+    #title_inner p {
+        font-size: 1.2rem;
+        margin: 1rem 0;
+    }
+
+    //Make links stacked, not next to each other
+    #links {
+        display: block;
+        margin: 0 auto;
+    }
+    #links .column {
+        margin: 0 auto;
+        width: 100%;
+        font-size: 1.25rem;
+    }
+    #links .column img {
+        max-width: 1.25rem;
+        height: auto;
+    }
+
+    #whoami p {
+        font-size: 1.25rem;
+        margin: 3vw;
+    }
 }

webpage/partials/_projects.scss

@@ -20,6 +20,7 @@
         font-size: 1.5rem;
         background-color: v.$light-blue;
         color: v.$navy-blue;
+        box-sizing: border-box;
         border: v.$navy-blue 2px solid;
         border-top: 0;
     }
@@ -31,6 +32,7 @@
     }
 
     .project_container {
+        box-sizing: border-box;
         width: 70%;
         padding: 3%;
         background-color: v.$light-blue;

webpage/styles/main.css

@@ -12,6 +12,16 @@ body {
   width: 80%;
 }
 
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+}
+@media (min-width: 481px) {
+  html {
+    font-size: 16px;
+  }
+}
 /* HEADER */
 #header {
   position: relative;
@@ -63,7 +73,7 @@ body {
 }
 
 #links .column img {
-  max-width: 0.8em;
+  max-width: 0.8rem;
   height: auto;
 }
 
@@ -99,6 +109,32 @@ a:visited {
   margin-top: 2%;
 }
 
+@media (max-width: 480px) {
+  #title_inner h1 {
+    font-size: 2.5rem;
+  }
+  #title_inner p {
+    font-size: 1.2rem;
+    margin: 1rem 0;
+  }
+  #links {
+    display: block;
+    margin: 0 auto;
+  }
+  #links .column {
+    margin: 0 auto;
+    width: 100%;
+    font-size: 1.25rem;
+  }
+  #links .column img {
+    max-width: 1.25rem;
+    height: auto;
+  }
+  #whoami p {
+    font-size: 1.25rem;
+    margin: 3vw;
+  }
+}
 @media (max-width: 480px) {
   div #skills {
     display: block;
@@ -157,6 +193,7 @@ div#skills .column ul p {
     font-size: 1.5rem;
     background-color: rgb(203, 239, 252);
     color: #091d3a;
+    box-sizing: border-box;
     border: #091d3a 2px solid;
     border-top: 0;
   }
@@ -167,6 +204,7 @@ div#skills .column ul p {
     background-color: rgb(169, 199, 210);
   }
   .project_container {
+    box-sizing: border-box;
     width: 70%;
     padding: 3%;
     background-color: rgb(203, 239, 252);