mobile adjustments

index.html

@@ -165,12 +165,12 @@ <h4 class="individual-project-title">Recipe Book</h4>
 <h3 style="text-align: center;" id="about-me">About Me</h3>
 <div class="portfolio-item">
   <div style="display: flex; justify-content: center;"><img src="./pictures/bio-pic.jpg" class="bio-pic"></div>
-  <div><p>I am a self-taught web developer and am currently front end focused. I am passionate about clean, functional design and code. I have lived in D.C. since 2012 and love it here! I was born and raised in Colorado (go Broncos). Outside of work I love to travel and see live music. </p>
+  <div><p class="about-description">I am a self-taught web developer and am currently front end focused. I am passionate about clean, functional design and code. I have lived in D.C. since 2012 and love it here! I was born and raised in Colorado (go Broncos). Outside of work I love to travel and see live music. </p>
   </div>
 </div>
 
 <div id="contact">
-  <h3 style="text-align: center; margin-bottom: 25px;">Contact Me</h3>
+  <h3 class="contact-title">Contact Me</h3>
   <div class="contact-methods">
     <a href="https://www.linkedin.com/in/nickzanetti/" target="_blank"><span><img src="./pictures/linkedin-white.png" class="linkedin"></span></a>
     <a href="https://github.com/nick-zanetti" target="_blank"><span class="devicons devicons-github_badge" style="font-size: 3em; width: auto;"></a>

styles.css

@@ -27,6 +27,8 @@ a {
 
 }
 
+/* BACK TO TOP BUTTON */
+
 #back-to-top {
   display: none;
   position: fixed;
@@ -51,6 +53,7 @@ a {
   background-color: white;
 }
 
+/* NAV BAR */
 
 .nav-bar {
   display: flex;
@@ -63,6 +66,8 @@ a {
   padding-left: .5em;
 }
 
+/* INTRO */
+
 .intro {
   display: flex;
   flex-direction: column;
@@ -98,6 +103,8 @@ a {
   grid-template-columns: 50% 50%;
 }
 
+/* PROJECTS */
+
 .projects-title {
   text-align: center;
   margin: 35px 0;
@@ -147,6 +154,8 @@ a {
   width: 100%;
 }
 
+/* ABOUT ME */
+
 #about-me {
   margin-top: 200px;
   margin-bottom: 30px;
@@ -162,6 +171,8 @@ a {
   margin-bottom: 200px;
 }
 
+/* CONTACT */
+
 #contact {
   margin-top: 200px;
   margin-bottom: 75px;
@@ -186,6 +197,11 @@ a {
   margin-bottom: 150px;
 }
 
+.contact-title{
+  text-align: center; 
+  margin-bottom: 25px;
+}
+
 .field-input {
   background-color: #222830;
   color: white;
@@ -235,6 +251,8 @@ a {
   color: #222830;
 }
 
+/* MOBILE STUFF */
+
 @media (max-width: 600px) {
   .portfolio-item{
     display: flex;
@@ -259,4 +277,29 @@ a {
     margin: 50px auto 
   }
 
+  .bio-pic {
+    border-radius: 50%;
+    height: 300px;
+
+}
+
+  #about-me{
+    font-size: 2em;
+  }
+
+  .about-description{
+    font-size: 1.5em;
+    margin: auto .5em;
+  }
+
+  .individual-project-title{
+    font-size: 2em;
+  }
+
+  .contact-title{
+    text-align: center; 
+    margin-bottom: 25px;
+    font-size: 2em;
+  }
+
 }