adding fix for device size of my phone --- dev tools had incorrect size for my phone 360x772

Author: ProsperousHeart

css/00-sections.css

@@ -71,16 +71,14 @@
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     #contact .section-intro {
         padding: 1.5rem;
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .section-intro h1 {
         font-size: 3.3rem;

css/01-main.css

@@ -390,3 +390,10 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 .narrow {
     max-width: 800px;
 }
+
+@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 6.2in) {*/
+    .btn--primary {
+        font-size: 1rem;
+    }
+}

css/02-home.css

@@ -792,11 +792,20 @@ html.no-csstransitions .home-content__main {
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .home-content {
         vertical-align: middle;
+        /*width: 100%;
+        height: 100%;
+        vertical-align: bottom;*/
+        padding-bottom: 10rem;
+    }
+    .home-content__scroll {
+        /*position: absolute;
+        left: .6rem;
+        /*bottom: -13.2rem;*/
+        bottom: -2.2rem;
     }
     .home-content h1 {
         font-size: 3.5rem;

css/03-about.css

@@ -82,22 +82,24 @@
         padding-left: 10px;
     }
     .s-about p.lead { /* .lead is in bootstrap */
-        padding: 0px;
+        /*padding: 0px;*/
         font-size: 1.7rem;
-        margin-bottom: 2rem;
+        padding-bottom: 2rem;
     }
     p {
         font-size: 1.3rem;
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .about-content .left {
         padding-right: 0;
     }
     .about-content .right {
         padding-left: 0;
     }
+    .about-content .btn-primary {
+        font-size: 1rem;
+    }
 }

css/04-projects.css

@@ -269,8 +269,7 @@
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .masonry-wrap {
         width: auto;

css/04-xp.css

@@ -115,8 +115,7 @@
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .timeline__block {
         padding-left: 5.5rem;

css/10-contact.css

@@ -277,8 +277,7 @@
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .contact__form {
         padding-right: 0;
@@ -465,7 +464,7 @@ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:foc
         /* parallax without JS - Create the scrolling effect */
         background-attachment: fixed;
         background-size: auto 100%;
-        background-position: 20%, center;
+        background-position: 10%, 25%;
         padding-top: 7rem;
         padding-bottom: 3rem;
         /*background-repeat: no-repeat;

css/11-footer.css

@@ -204,8 +204,7 @@ footer a:hover, footer a:focus {
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .footer-site-logo {
         width: 100px;

css/blog.css

@@ -770,8 +770,7 @@ article.blog-single .blog-content {
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .page-header__content {
         font-size: 1.6rem;

css/media.css

@@ -279,8 +279,7 @@
     }
 }
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     /* On screens that are 413px wide or less,
     make the columns stack on top of each other
@@ -289,12 +288,15 @@
         flex-direction: column;
     }
     #home .home-content .row h2 {
-        font-size: 2.63rem;
-        width: 90%;
+        font-size: 2rem;
+        width: 95%;
     }
 
     #home .home-content .flex-row {
-        padding-top: 35rem;
+        padding-top: 60%;
+    }
+    #home .home-content {
+        margin-bottom: 0px;
     }
 }
 
@@ -307,8 +309,7 @@
 /* stack columns on small mobile devices
  * ------------------------------------------------------------------- */
 
-/*@media only screen and (max-width: 400px) {*/
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 400px) {
 /*@media only screen and (max-width: 6.2in) {*/
     /* typography */
     html {
@@ -342,4 +343,38 @@
         margin-left: 0;
         margin-right: 0;
     }
+
+    #about h1,
+    #XP h1 {
+        font-size: 3.1rem;
+    }
+    #about .section-intro,
+    #XP .section-intro,
+    #XP .col-six {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+    #about p.lead,
+    #XP p.lead {
+        font-size: 1.8rem;
+    }
+    #about p {
+        font-size: 1.65rem; /* less than p .ead */
+        /*padding-bottom: 2.2rem;*/
+    }
+    #XP h3 {
+        font-size: 2.1rem;
+    }
+    #XP h5 {
+        font-size: 1.25rem;
+    }
+    #XP ul.lead {
+        font-size: 1.6rem;
+    }
+    #contact .section-intro {
+        padding: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        width: 98%;
+    }
 }