mobile adjustments

nick-zanetti · Oct 14, 2020 · de5237b · de5237b
1 parent deae4d4
commit de5237b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -133,7 +133,7 @@ <h4 class="individual-project-title">Scoreboard</h4>
   <h3>About Me</h3>
   <div class="portfolio-item">
     <img src="./pictures/bio-pic.jpg" class="bio-pic">
-    <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>
+    <p class="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>
 </section>
 

diff --git a/styles.css b/styles.css
@@ -285,9 +285,6 @@ a {
   justify-content: space-evenly;
 }
 
-/* .contact-methods > a {
-  text-decoration: none;
-} */
 
 .linkedin {
   width: 48px;
@@ -362,13 +359,75 @@ a {
 }
 
 
-/* MOBILE STUFF */
+/* MOBILE STUFF *//* MOBILE STUFF *//* MOBILE STUFF *//* MOBILE STUFF *//* MOBILE STUFF *//* MOBILE STUFF */
 
 @media (max-width: 600px) {
+  .nav-bar {
+    margin-right: 2.5%;
+  }
+
+  .nav-item {
+    font-size: 1em;
+  }
+
+  .intro {
+    font-size: 1.5em;
+  }
+
+  .picture {
+    display: none; 
+  }
+
+  .heading-pic {
+    display: none;
+  }
+
+  .skills-wrapper {
+    margin: 75px 10px 75px 10px;
+    grid-template-columns: 20% 50% 30%;
+  }
+
+  #experience-title {
+    font-size: 3em;
+  }
+
+  #ifu-title {
+    font-size: 1.8em;
+    text-align: center;
+    margin: 10% 2%;
+  }
+
+  .experience {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .experience > p {
+    font-size: 1.5em;
+    width: 90%;
+    order: 2;
+  }
+
+  .ifucontainer {
+    width: 250px;
+    height: auto;
+    order: 1;
+  }
+
+  #projects-title {
+    font-size: 3em;
+  }
+
+  .projects {
+    grid-gap: 50px;
+  }
+
   .portfolio-item{
     display: flex;
     flex-direction: column;
-    margin-left: .5em;
+    margin: 0 .5em;
+    /* margin-left: .5em; */
   }
 
   .description{
@@ -383,36 +442,35 @@ a {
 
   }
 
-  .picture {
-    display: flex;
-    justify-content: center;
-    height: 250px;
-    margin: 50px auto 
-  }
-
   .bio-pic {
     border-radius: 50%;
-    height: 300px;
+    width: 100%;
+    height: auto;
+    margin: 0;
 
 }
 
-  #about-me{
-    font-size: 2em;
+  #about-me > h3 {
+    font-size: 3em;
   }
 
   .about-description{
-    font-size: 1.5em;
+    font-size: 1em;
     margin: auto .5em;
   }
 
   .individual-project-title{
     font-size: 2em;
   }
 
+  #contact {
+    margin: 50px 0; 
+  }
+
   .contact-title{
     text-align: center; 
     margin-bottom: 25px;
-    font-size: 2em;
+    font-size: 3em;
   }
 
 }