adding fix for device size of my phone --- dev tools had incorrect size for my phone 412x702

Author: ProsperousHeart

css/00-sections.css

@@ -71,14 +71,16 @@
     }
 }
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@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: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .section-intro h1 {
         font-size: 3.3rem;

css/01-main.css

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

css/02-home.css

@@ -792,7 +792,8 @@ html.no-csstransitions .home-content__main {
     }
 }
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .home-content {
         vertical-align: middle;

css/03-about.css

@@ -91,15 +91,23 @@
     }
 }
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .about-content .left {
         padding-right: 0;
     }
     .about-content .right {
         padding-left: 0;
     }
-    .about-content .btn-primary {
+    .about-content .btn {
         font-size: 1rem;
     }
+    .s-about p.lead { /* .lead is in bootstrap */
+        padding-bottom: 1rem;
+        margin-bottom: 0px;
+    }
+    p {
+        font-size: 1.4rem;
+    }
 }

css/04-projects.css

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

css/04-xp.css

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

css/10-contact.css

@@ -277,7 +277,8 @@
     }
 }
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@media only screen and (max-width: 6.2in) {*/
     .contact__form {
         padding-right: 0;
@@ -464,7 +465,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: 10%, 25%;
+        background-position: 12.5%, 30%;
         padding-top: 7rem;
         padding-bottom: 3rem;
         /*background-repeat: no-repeat;

css/11-footer.css

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

css/blog.css

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

css/media.css

@@ -279,7 +279,8 @@
     }
 }
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@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
@@ -293,7 +294,7 @@
     }
 
     #home .home-content .flex-row {
-        padding-top: 60%;
+        padding-top: 33%;
     }
     #home .home-content {
         margin-bottom: 0px;
@@ -309,7 +310,8 @@
 /* stack columns on small mobile devices
  * ------------------------------------------------------------------- */
 
-@media only screen and (max-width: 400px) {
+/*@media only screen and (max-width: 400px) {*/
+@media only screen and (max-width: 412px) {
 /*@media only screen and (max-width: 6.2in) {*/
     /* typography */
     html {
@@ -366,15 +368,22 @@
         font-size: 2.1rem;
     }
     #XP h5 {
-        font-size: 1.25rem;
+        font-size: 1.45rem;
     }
     #XP ul.lead {
         font-size: 1.6rem;
     }
+    #contact h3 {
+        padding-top: 2rem;
+    }
     #contact .section-intro {
         padding: 0px;
         margin-left: 0px;
         margin-right: 0px;
         width: 98%;
     }
+    #contact .section-intro .col-full {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
 }