Mobile screens issues fixes

v2.css

@@ -98,6 +98,14 @@ section > div > div{
     flex-direction: column;
 }
 
+section > div > div > p{
+    width: 350px;
+    color: inherit;
+}
+
+
+
+
 /*
 div {
     display: flex;
@@ -805,17 +813,7 @@ input:focus {
 
 /*.................................................................................................................. Mobile Styles */
 
-@media (max-width: 950px) {
+@media (max-width: 1200px) {
-    
-    
-    
-}
-
-
-
-
-
-@media (max-width: 800px) {
     
     header {
         left: 20px;
@@ -862,72 +860,7 @@ input:focus {
     nav > a {
         margin-bottom: 8px;
     }
-
-    section {
-        padding: 60px 30px;
-    }
-
-    section > div {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        margin: 0;
-        top: 0;
-    }
     
-    section > div.mobile-flip {
-        flex-direction: column-reverse;
-    }
-
-    section > div > div{
-        flex-grow: 1;
-        width: 100%;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: flex-start;
-        margin: 0;
-        top: 0;
-    }
-
-
-
-    /*................................................... Text */
-
-    a {
-        
-    }
-
-    h1 {
-        font-size: 36px;
-    }
-
-    h2 {
-        font-size: 30px;
-    }
-
-    h3 {
-
-    }
-
-    h4 {
-        
-    }
-
-    p {
-        font-size: 16px;
-    }
-
-
-
-
-
-
-
-
-    /*................................................... General classes and IDs */
-
     .aside-header {
         display: none;
     }
@@ -963,6 +896,76 @@ input:focus {
         display: flex;
     }
     
+}
+
+
+
+
+
+@media (max-width: 800px) {
+    
+    
+
+    section {
+        padding: 60px 30px;
+        margin: 0;
+        position: relative;
+    }
+
+    section > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    
+    section > div.mobile-flip {
+        flex-direction: column-reverse;
+    }
+
+    section > div > div{
+        flex-grow: 1;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+    
+    section > div > div > p{
+        width: 100%;
+    }
+
+
+
+    /*................................................... Text */
+
+    a {
+        
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    h2 {
+        font-size: 30px;
+    }
+
+    h3 {
+
+    }
+
+    h4 {
+        
+    }
+
+    p {
+        font-size: 16px;
+    }
+
+    
+    
     
     
     /*###################################*/
@@ -984,11 +987,12 @@ input:focus {
     }
 
     .hero-graphic-wrapper {
-        width: 40%;
+        width: 300px;
-        height: 600px;
+        height: 300px;
         margin-right: none;
-        margin-left: 20px;
+        margin-left: -20px;
         margin-top: 50px;
+        margin-bottom: 50px;
     }
     
     #benjamin-hero-text {
@@ -999,19 +1003,20 @@ input:focus {
 
     .hero-graphic-block {
         width: 100%;
-        height: auto;
+        height: 250px;
         margin-top: -25px;
     }
 
     .hero-graphic-block > img {
         width: 300px;
-        top: -100px;
+        top: -20px;
     }
 
     .hero-text-wrapper {
         width: 60%;
         padding-top: 40px;
-        margin-left: 80px;
+        margin-left: 40px;
+        min-width: 250px;
     }
 
     .scroll-down-link-block {
@@ -1057,13 +1062,15 @@ input:focus {
     }
 
     .below-fold {
-        padding-top: 20px;
+        padding-top: 250px;
         padding-bottom: 100px;
+        margin: 0;
     }
 
     .skewed-bg {
-        height: 400px;
+        height: 200px;
-        margin-top: -80px;
+        margin-top: 150px;
+        top: 0;
     }
 
     section > div.container {
@@ -1205,6 +1212,8 @@ input:focus {
     .hero-graphic-block > img {
         position: absolute;
         width: 300px;
+        top: -100px;
+        margin: 0;
     }
 
     .hero-text-wrapper {

v2.html

@@ -119,7 +119,7 @@
         <div style="perspective:400px;transform-style:preserve-3d;">
             <div class="container-darkbg translate" data-speed="0" style="perspective:400px;transform-style:preserve-3d;">
                 <h2 class="scroll-into-view">Some of my Work</h2>
-                <p style="max-width:350px;color:inherit;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+                <p class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
             </div>
             
             <div class="right-column" style="perspective:400px;transform-style:preserve-3d;">
@@ -159,7 +159,7 @@
             
             <div class="right-column translate" data-speed="0.05" style="perspective:400px;transform-style:preserve-3d;">
                 <h2 class="scroll-into-view">A little about Me</h2>
-                <p style="max-width:350px;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+                <p class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
             </div>
             
             <div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">About&nbsp;Me</span></div>