From 611c35539912040ec9983763d7e457d7e8bb218a Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Mon, 24 Oct 2022 23:25:30 +0100
Subject: [PATCH] fixed other uses of height=100vh rather than min-height -
 including any other issues revealed by doing that, also fixed grid naming
 issue with base appareal solution

---
 .../article-preview-component/css/style.css   | 40 +++++++------
 .../base-apparel-coming-soon/css/style.css    | 18 ++++--
 .../four-card-feature-section/css/style.css   |  6 +-
 .../css/style.css                             | 59 ++++++++++---------
 .../profile-card-component/css/style.css      | 37 +++++++-----
 .../css/style.css                             | 52 ++++++++--------
 6 files changed, 115 insertions(+), 97 deletions(-)

diff --git a/projects/FrontendMentor/newbie/article-preview-component/css/style.css b/projects/FrontendMentor/newbie/article-preview-component/css/style.css
index 66e10f6..311cf43 100644
--- a/projects/FrontendMentor/newbie/article-preview-component/css/style.css
+++ b/projects/FrontendMentor/newbie/article-preview-component/css/style.css
@@ -1,10 +1,10 @@
-/* 
+/*
  * Challenge resolutions:
  * 375x667 & 1440x800
  * 327x512 - 730x280
  */
 
- @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap");
 
 :root {
     /* font stuff */
@@ -18,16 +18,16 @@
     --cornerRadius: 10px;
 }
 
-/* Base styling */ 
+/* Base styling */
 
 body {
-    font-family: 'Manrope', sans-serif;
+    font-family: "Manrope", sans-serif;
     background-color: var(--lightGrayishBlue);
     display: flex;
     flex-direction: column;
     font-size: 13px;
     justify-content: center;
-    height: 100vh;
+    min-height: 100vh;
 }
 
 .articlePreview {
@@ -50,7 +50,7 @@ body {
 
 .previewImage > img {
     width: 100%;
-    margin:-5% 0 -14.5% 0%;
+    margin: -5% 0 -14.5% 0%;
 }
 
 .previewBody {
@@ -115,7 +115,7 @@ body {
 
 .articleShareButton {
     background-color: var(--lightGrayishBlue);
-    color: #6E8098;
+    color: #6e8098;
 
     width: 30px;
     height: 30px;
@@ -152,7 +152,6 @@ body {
     padding: 0.75rem 1rem;
     top: -60px;
     right: -47px;
-
 }
 
 .articleShareButtonTooltip::before {
@@ -180,18 +179,18 @@ body {
     background: var(--veryDarkGrayishBlue);
 }
 
-.articleShareButtonTooltip > p, .articleShareSection > p {
+.articleShareButtonTooltip > p,
+.articleShareSection > p {
     letter-spacing: 5px;
     color: var(--grayishBlue);
     font-weight: 500;
     font-size: 13px;
 }
 
-
 @media screen and (min-width: 650px) {
     body {
         align-content: center;
-        align-items: center; 
+        align-items: center;
     }
 
     .articlePreview {
@@ -199,7 +198,7 @@ body {
         width: 50%;
         min-width: 600px;
         overflow: visible;
-    }    
+    }
 
     .previewImage {
         width: 100%;
@@ -207,7 +206,7 @@ body {
     }
 
     .previewImage > img {
-        margin:0;
+        margin: 0;
         height: 105%;
         object-fit: cover;
         object-position: left;
@@ -226,17 +225,22 @@ body {
         font-size: 20px;
         letter-spacing: 0.25px;
         line-height: 28px;
-
     }
     .articleSell {
         margin-top: 0.5rem;
     }
-    
+
     .articleFooter {
         padding: 0rem 1.75rem 1.5rem 1.5rem;
     }
-
 }
 
-.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
-.attribution a { color: hsl(228, 45%, 44%); }
\ No newline at end of file
+.attribution {
+    position: absolute;
+    bottom: 0;
+    font-size: 11px;
+    text-align: center;
+}
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css
index cac4809..e864881 100644
--- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css
+++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css
@@ -71,7 +71,7 @@
 
 body {
     font-family: "Josefin Sans", sans-serif;
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     justify-content: center;
 
@@ -80,15 +80,17 @@ body {
 
 main {
     max-width: 31.25rem;
+
+    overflow: hidden;
 }
 
 .header {
     margin: 1.875rem 2rem 2rem 2rem;
-    grid-area: "logo";
+    grid-area: logo;
 }
 
 .body {
-    grid-area: "body";
+    grid-area: body;
 
     margin: 4rem 2rem 5.75rem 2rem;
     text-align: center;
@@ -117,7 +119,7 @@ main {
 }
 
 .hero-picture {
-    grid-area: "hero-image";
+    grid-area: hero-image;
     justify-self: end;
     margin: 0 auto;
 }
@@ -221,6 +223,12 @@ main {
     white-space: nowrap;
 }
 
+@media screen and (max-width: 23.375rem) {
+    .email-form {
+        width: unset;
+    }
+}
+
 @media screen and (min-width: 62.5rem) {
     :root {
         --fs-header: 4rem;
@@ -241,7 +249,7 @@ main {
     body {
         background: var(--gradient-white);
 
-        margin: auto;
+        margin: 0 auto;
     }
 
     main {
diff --git a/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css b/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css
index 1bc7d10..0b99642 100644
--- a/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css
+++ b/projects/FrontendMentor/newbie/four-card-feature-section/css/style.css
@@ -36,7 +36,11 @@
 body {
     font-size: 15px;
     background-color: var(--veryLightGray);
-    height: 100vh;
+    min-height: 100vh;
+}
+
+main {
+    margin-bottom: 5rem;
 }
 
 .flexContainer {
diff --git a/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css b/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css
index 08205c8..1c5fd92 100644
--- a/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css
+++ b/projects/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap");
 
 :root {
     font-size: 16px;
@@ -10,16 +10,16 @@ body {
     background-image: url("../images/bg-desktop.svg");
     background-repeat: no-repeat;
     /*background-size: contain; */
-    
+
     color: white;
     margin: 0;
     /* display: flex; */
 
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
 }
 
 h1 {
-    font-family: 'Poppins', sans-serif;
+    font-family: "Poppins", sans-serif;
     font-weight: 400; /* 400 & 40 are very close*/
     font-size: 40px;
 }
@@ -116,17 +116,22 @@ h1 {
     background: rgb(174, 6, 208);
 }
 
-.attribution { margin-top: 1rem; font-size: 11px; text-align: center; }
-.attribution a { color: hsl(63, 100%, 65%); }
+.attribution {
+    margin-top: 1rem;
+    font-size: 11px;
+    text-align: center;
+}
+.attribution a {
+    color: hsl(63, 100%, 65%);
+}
 
 /* Formating for Mobile devices. Sample to match is 375z800 */
 @media screen and (max-width: 1100px) {
-
     body {
         background-image: url("../images/bg-mobile.svg");
         background-repeat: no-repeat;
         /* background-size: contain; */
-        
+
         color: white;
         margin: 0;
         padding: 0;
@@ -146,41 +151,37 @@ h1 {
 
     .illustration {
         max-width: 100%;
-        max-height: 100vh;
-        height: auto;
+        max-height: 100%;
+        /* height: auto; */
     }
 
     .middleSection {
         margin: 0;
         display: flex;
         flex-direction: column;
-        width: 100%
-
+        width: 100%;
     }
-    
+
     .siteBlurb {
-        margin:0;
+        margin: 0;
         margin-top: 0.5rem;
         text-align: center;
         width: 100%;
-    
-        /* line-height: 2rem;
-        font-weight: 400; */
     }
-    
+
     .siteBlurb h1 {
         margin: 1.625rem 2rem 0rem 2rem;
         font-weight: 400;
         font-size: 1.5rem;
         line-height: 1.5;
     }
-    
+
     .siteBlurb p {
-        margin:0.9rem 2.25rem;
+        margin: 0.9rem 2.25rem;
         font-size: 1rem;
         line-height: 1.5rem;
     }
-    
+
     .registerButton {
         margin-top: 0.875rem;
         background-color: white;
@@ -197,21 +198,21 @@ h1 {
         border-radius: 32px;
         box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
     }
-    
+
     .socialButtonsSection {
         /* display: block; */
         text-align: center;
-        margin:0;
+        margin: 0;
         margin-top: 3rem;
     }
-    
+
     .socialButtonsSection i {
         /* padding: 0.5rem; */
         margin-left: 0.375rem;
         margin-top: 0.9375rem;
-        margin-right: 0; 
+        margin-right: 0;
     }
-    
+
     .circleIcon {
         margin: 0;
         padding: 0;
@@ -228,5 +229,7 @@ h1 {
         font-size: 14px;
     }
 
-    .attribution { margin: 10px 0;}
-}
\ No newline at end of file
+    .attribution {
+        margin: 10px 0;
+    }
+}
diff --git a/projects/FrontendMentor/newbie/profile-card-component/css/style.css b/projects/FrontendMentor/newbie/profile-card-component/css/style.css
index 3e001b6..4f0f403 100644
--- a/projects/FrontendMentor/newbie/profile-card-component/css/style.css
+++ b/projects/FrontendMentor/newbie/profile-card-component/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");
 
 /* sizes: 1440x720 , 375 × 667 */
 *,
@@ -23,14 +23,13 @@
 
 html {
     font-size: var(--page-base-font-size);
-    height: 100%;
 }
 
 body {
     background-color: var(--dark-cyan);
     font-size: var(--default-font-size);
     font-weight: 700;
-    font-family: 'Kumbh Sans', sans-serif;
+    font-family: "Kumbh Sans", sans-serif;
     color: var(--very-dark-desaturated-blue);
 
     display: flex;
@@ -39,7 +38,9 @@ body {
     align-items: center;
 
     margin: 0 auto;
-    height: 100%;
+    min-height: 100vh;
+
+    overflow: hidden;
 }
 
 .card {
@@ -48,7 +49,7 @@ body {
     box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
     border-radius: 15px;
     text-align: center;
-    
+
     width: min(87vw, 350px);
 }
 
@@ -68,7 +69,7 @@ body {
     height: 96px;
 
     border-radius: 50%;
-    top: calc(100% - 96px/2); 
+    top: calc(100% - 96px / 2);
 }
 
 .photo:after {
@@ -76,12 +77,12 @@ body {
     padding: 5px;
     border: 5px solid white;
     position: absolute;
-    content: '';
+    content: "";
     top: -5px;
     left: -5px;
     bottom: -5px;
     right: -5px;
-  }
+}
 
 .nameAndAge {
     margin-top: 4.5rem;
@@ -89,7 +90,8 @@ body {
     padding-bottom: 0.25rem;
 }
 
-.name, .stat {
+.name,
+.stat {
     font-weight: bold;
 }
 
@@ -129,10 +131,11 @@ body {
     padding-bottom: 0.1875rem;
 }
 
-.topCircle, .bottomCircle {
+.topCircle,
+.bottomCircle {
     position: absolute;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    min-height: 100%;
     background-size: auto;
     transform: translate(-50%, -50%);
     z-index: -1;
@@ -158,9 +161,11 @@ footer {
     bottom: 1rem;
 }
 
-.attribution { 
-    font-size: 11px; 
-    text-align: center; 
+.attribution {
+    font-size: 11px;
+    text-align: center;
     bottom: 1rem;
 }
-.attribution a { color: hsl(228, 45%, 44%); }
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
diff --git a/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css b/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css
index bc81393..05d19f1 100644
--- a/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css
+++ b/projects/FrontendMentor/newbie/single-price-grid-component-master/css/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
 
 /* -- Basic Styling -- */
 
@@ -15,7 +15,6 @@
     --site-grayish-blue: hsl(218, 22%, 67%);
     --box-border-radius: 8px;
     font-weight: 400;
-
 }
 
 * {
@@ -29,9 +28,9 @@
 body {
     /* per the style guide, the body copy is 16px */
     font-size: 16px;
-    font-family: 'Karla', sans-serif;
+    font-family: "Karla", sans-serif;
     width: 85vw;
-    height: 100vh;
+    min-height: 100vh;
     margin: 0 auto;
 
     display: flex;
@@ -44,7 +43,7 @@ body {
 }
 
 .container {
-    box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
+    box-shadow: 2px 10px 25px -12px rgba(0, 0, 0, 0.5);
 }
 
 .box {
@@ -59,7 +58,6 @@ body {
     color: white;
     font-size: 0.95rem;
     /* font-weight: 700; */
-
 }
 
 /* Specific stylings */
@@ -74,7 +72,7 @@ body {
 
 .topRow .heading {
     color: var(--site-cyan);
-    font-size: 1.20rem;
+    font-size: 1.2rem;
 }
 
 .quickSell {
@@ -91,10 +89,9 @@ body {
 .bottomRow {
     display: flex;
     flex-direction: column;
-
 }
 .pricingBox {
-    background-color: var(--site-cyan);    
+    background-color: var(--site-cyan);
 }
 .priceRow {
     display: flex;
@@ -104,7 +101,6 @@ body {
 .price {
     color: white;
     font-size: 1.5rem;
-
 }
 .pricePeriod {
     color: var(--site-greener-cyan);
@@ -123,21 +119,18 @@ body {
     color: white;
     /* width: 85%; */
     /* height: 20%; */
-    padding: 13px 3.25rem; 
+    padding: 13px 3.25rem;
     /* margin-left: auto; */
     /* margin-right: auto; */
     /* align-self: center; */
     justify-content: center;
     border-radius: 5px;
     font-weight: 700;
-
-
 }
 .whyUsBox {
     background-color: var(--site-greener-cyan);
     border-bottom-left-radius: var(--box-border-radius);
     border-bottom-right-radius: var(--box-border-radius);
-
 }
 .blurb {
     margin-top: 0.75rem;
@@ -158,15 +151,19 @@ footer {
 }
 
 /* Feel free to remove these styles or customise in your own stylesheet 👍 */
-    .attribution { font-size: 11px; text-align: center; 
-        /* visibility: hidden; */
-    }
-    .attribution a { color: hsl(228, 45%, 44%); }
+.attribution {
+    font-size: 11px;
+    text-align: center;
+    /* visibility: hidden; */
+}
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
 
-/** 
+/**
 * * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
 * TODO: Tweak transition point later
-*/ 
+*/
 @media screen and (max-width: 500px) {
     .topRow {
     }
@@ -189,7 +186,7 @@ footer {
     }
 
     .quickSell {
-        margin-top: 1.20rem;
+        margin-top: 1.2rem;
         font-size: 0.8rem;
     }
 
@@ -220,22 +217,20 @@ footer {
     }
     .signupButton {
         margin-top: 1.5rem;
-        padding: 13px 3.25rem; 
-    
+        padding: 13px 3.25rem;
     }
     .whyUsBox {
     }
     .blurb {
         margin-top: 0.75rem;
     }
-    
+
     .blurb .unstyledList {
         font-size: 14px;
     }
-    
+
     footer {
     }
-
 }
 
 @media screen and (min-width: 500px) and (max-width: 800px) {
@@ -245,7 +240,7 @@ footer {
     }
 
     .signupButton {
-        font-size: 0.90rem;
+        font-size: 0.9rem;
     }
 }
 
@@ -261,7 +256,6 @@ footer {
     .pricingBox {
         width: 50%;
         border-bottom-left-radius: var(--box-border-radius);
-    
     }
     .signupButton {
     }
@@ -269,4 +263,4 @@ footer {
         width: 50%;
         border-bottom-left-radius: 0px;
     }
-}
\ No newline at end of file
+}