From 64647044b0391bcd63a740d3446708e983d78ccc Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sun, 11 Oct 2020 17:01:41 +0100
Subject: [PATCH] Improvements for mobile sizing. menu still to do

---
 .../Project3-ProductLandingPage/index.html    |  9 ++--
 .../Project3-ProductLandingPage/style.css     | 44 +++++++++++++++++--
 2 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html
index 7b0c250..814ca5e 100644
--- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html
+++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/index.html
@@ -29,6 +29,7 @@
                 <input type="email" name="email" id="email" placeholder="person@example.com" required>
             </div>
             <div class="form-example">
+                <!-- using class here doesn't work on iOS -->
                 <input class="btn-link" id="submit" type="submit" value="Subscribe!">
             </div>
         </form>
@@ -75,10 +76,10 @@
     </section>
     <section id="videos">
         <h2>Teasers for games</h2>
-        <iframe class="video" id="video" width="420" height="315" src="https://www.youtube.com/embed/KipPMgbpKzk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
-        <iframe class="video" id="video2" width="420" height="315" src="https://www.youtube.com/embed/A4BuL886bJA?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
-        <iframe class="video" id="video3" width="420" height="315" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
-        <iframe class="video" id="video4" width="420" height="315" src="https://www.youtube.com/embed/-PxHfU2Xoac?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+        <iframe class="video" id="video" src="https://www.youtube.com/embed/KipPMgbpKzk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+        <iframe class="video" id="video3" src="https://www.youtube.com/embed/LhFETREAvhc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+        <iframe class="video" id="video4" src="https://www.youtube.com/embed/-PxHfU2Xoac?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
+        <iframe class="video" id="video2" src="https://www.youtube.com/embed/A4BuL886bJA?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
     </section>
     <section id="features">
         <h2 >Features</h2>
diff --git a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css
index 73b2bb1..97e7a79 100644
--- a/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css
+++ b/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/style.css
@@ -5,8 +5,14 @@
     font-family: 'Roboto', sans-serif;
 }
 
+*{ 
+    padding: 0;
+    margin: 0;
+}
+
 body {
     background-color: rgb(189, 188, 188);
+    margin 0 auto;
 }
 
 #nav-bar {
@@ -85,6 +91,15 @@ body {
     padding: 1.5em;
 }
 
+section {
+    margin-top: 0.75rem;
+}
+
+/* Put spacing between the section title (first element) and the next element below */
+section :nth-child(2) {
+    margin-top: 0.5rem;
+}
+
 /* Form Section */
 
 #formsection {
@@ -96,6 +111,7 @@ body {
 }
 
 #formsection #email {
+    margin-top: 1rem;
     padding-left: 10px;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -123,6 +139,8 @@ body {
 
 .grid {
     display: flex;
+    flex-wrap: nowrap;
+    flex-grow: 1;
 }
 
 #games .icon {
@@ -137,26 +155,46 @@ body {
 #games .details {
     margin-left: 2rem;
     text-align: left;
-    height: 125px;
+    height: auto;
     width: 50vw;
     padding: 5px;
   }
 
 /* How To Section */
 #videos {
-    padding: 1em;
     text-align: center;
 }
 
+.video {
+    width: 420px;
+    height: 315px;
+}
+
 .video + .video {
     margin-top: 1rem;
 }
 
 /* Pricing Section */
 #features {
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 60%;
     text-align: center;
+}
+
+/* start handling at 700 for menu */
+@media screen and (max-width: 700px) {
 
 }
 
+/* below video tweak video sizes */
+@media screen and (max-width: 500px) {
+    #formsection #email {
+        font-size: 20px;
+    }
+
+    .video {
+        width: 90%;
+        height: calc((90vw / 4) * 3);
+    }    
+}