Add dynamic white height at marketing

src/components/MarketingHeader.js

@@ -18,6 +18,7 @@ class MarketingHeader extends React.Component {
     this.state = {
       collapse: false
     };
+
     this.onClick = this.onClick.bind(this);
     this.handleNavbarClick = this.handleNavbarClick.bind(this);
   }
@@ -36,6 +37,7 @@ class MarketingHeader extends React.Component {
 
   render() {
     return (
+      <div>
       <Navbar
         dark
         expand="md"
@@ -61,6 +63,7 @@ class MarketingHeader extends React.Component {
           </Collapse>
         </Container>
       </Navbar>
+      </div>
     );
   }
 }

src/components/pages/MarketingPage.js

@@ -19,8 +19,24 @@ class MarketingPage extends React.Component {
     this.onClick4 = this.onClick4.bind(this);
     this.state = {
       collapse: false,
-      accordion: false
+      accordion: false,
+      width: 0,
+      height: 0
     };
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateWindowDimensions();
+    window.addEventListener('resize', this.updateWindowDimensions);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  updateWindowDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
   }
 
   toggle() {
@@ -84,6 +100,9 @@ class MarketingPage extends React.Component {
   }
 
   render() {
+    console.log(this.state.height);
+    const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
+    console.log(whiteSpaceheight);
     return (
       <div>
       <AppHeader />
@@ -169,6 +188,9 @@ class MarketingPage extends React.Component {
       </div>
       </section>
       </div>
+      {/* Add dynamic white spaces */}
+      <div className="dynamic-white-space" style={{height: whiteSpaceheight}}>
+      </div>
       <Footer />
       </div>
   );