From 0ab8abea6950ef1876b623f0317ca3332d4de78b Mon Sep 17 00:00:00 2001
From: BenjaminToby <52448020+BenjaminToby@users.noreply.github.com>
Date: Mon, 7 Jun 2021 06:33:19 +0100
Subject: [PATCH] Mobile screens issues fixes

---
 v2.css  | 179 +++++++++++++++++++++++++++++---------------------------
 v2.html |   4 +-
 2 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/v2.css b/v2.css
index 2fc9a4d..0c9bbc2 100644
--- a/v2.css
+++ b/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: 800px) {
+@media (max-width: 1200px) {
     
     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%;
-        height: 600px;
+        width: 300px;
+        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;
-        margin-top: -80px;
+        height: 200px;
+        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 {
diff --git a/v2.html b/v2.html
index adbd0d5..3f87968 100644
--- a/v2.html
+++ b/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>