add workaround for content height to not exceed view height on mobile

Author: Jeddf

README.md

@@ -5,3 +5,4 @@
 This is their landing page, it's made with the [Gatsby](https://www.gatsbyjs.org/) framework!.
 
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Maintainability](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/maintainability)](https://codeclimate.com/github/codeclimate/codeclimate/maintainability)

gatsby-browser.js

@@ -0,0 +1,10 @@
+exports.onClientEntry = () => {
+  // The value in the --wh custom property set to the root of the document
+  document.documentElement.style.setProperty("--wh", `${window.innerHeight}px`);
+  window.addEventListener("resize", () => {
+    document.documentElement.style.setProperty(
+      "--wh",
+      `${window.innerHeight}px`
+    );
+  });
+};

src/components/layout.css

@@ -3,7 +3,6 @@ html {
 }
 body {
   margin: 0;
-  background: lavender;
 }
 
 footer {

src/components/layout.js

@@ -12,7 +12,9 @@ const Layout = ({ children }) => (
 );
 
 const Page = styled.div`
-  min-height: 100vh;
+  background: lavender;
+  min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  min-height: var(--wh, 100vh);
   display: flex;
   flex-direction: column;
   align-items: center;