Content cutting off after certain height using react-bootstrap

Question

I am having trouble making my react app responsive, I am using React-Bootstrap to create my portfolio but I have ran into an issue I made the site look good in portrait mode. But when it comes to making the site look good landscape its not looking so hot, the content is cut off at a certain viewport height. I want the content to be scroll able no matter the viewport height but its not allowing me to do so.

I am using React-bootstrap to lay this page out, and I am new to React but I have some experience using bootstrap so using react-bootstrap is a little bit of struggle

here is my css

    @import url('https://fonts.googleapis.com/css?family=Roboto');

    .wrapper-3 {
      position:relative ;
      top: 20%;
      height: 100vh;
    }

    .Contact {
      color: white;
      font-family: Roboto;
      font-size: 3em;
    }

    .Email {
      color: white;
      font-size: 1.7em;
    }

    .underline-contact {
      border: 2px solid white;
      border-radius: 6px;
      width: 10em;
    }

    @media screen and (max-width: 690px) {
      #contact-icons {
        margin-right: 3%;
      }
    }

    @media screen and (max-height: 429px) {
      .wrapper-3 {
        margin-top: 20em;
      }
    }

    @media screen and (max-width: 444px) {
      #contact-icons {
        margin-right: 2%;
      }

      .contact-icon {
        font-size: 3em;
      }
    }

    @media screen and (max-width: 382px) {
      .Email {
        font-size: 1.6em;

      }
    }

    @media screen and (max-width: 372px) {
      .contact-icon {
        font-size: 2.5em;
      }
    }

    @media screen and (max-width: 367px) {
      .Email {
        font-size: 1.4em;
      }
    }


    @media screen and (max-height: 391px) {
      .contact-row {
        position: relative;
        top: 5em;
      }
    }


    @media screen and (max-height: 369px) {
      .wrapper-3 {
        top: 10em;

      }
    }

    @media screen and (max-height: 361px) {
      .wrapper-3 {
        top: 11em;

      }
    }

Here's my jsx

import React from 'react';
import { Container, Col, Row } from 'react-bootstrap';
import './Contact.css';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(fab)

class Contact extends React.Component {
  render() {
    return  (
      <div>
        <Container className="content" fluid>
          <div className="wrapper-3">
            <div className="contact-row">
              <Row className="justify-content-center">
                <Col xs="auto">
                  <h1 className="Contact">Contact</h1>
                  <hr className="underline-contact"></hr>
                </Col>
              </Row>
              <Row className="mt-3 justify-content-center">
                <Col xs="auto">
                <h3 className="Email">harrisonjones5678@gmail.com</h3>
                </Col>
              </Row>
              <Row
              className="justify-content-center ml-5 mt-5"
              id="contact-icons">
                <Col xs="auto">
                  <FontAwesomeIcon className="icon one contact-icon"
                  icon={['fab', 'git']}
                  size="6x"
                  style={{color: '#FFFFFF'}} />
                </Col>
                <Col xs="auto">
                <FontAwesomeIcon className="icon two contact-icon"
                icon={['fab', 'linkedin']}
                size="6x"
                style={{color: '#FFFFFF'}} />
                </Col>
                <Col xs="auto">
                <FontAwesomeIcon className="icon three contact-icon"
                icon={['fab', 'instagram']}
                size="6x"
                style={{color: '#FFFFFF'}} />
                </Col>
              </Row>
            </div>
          </div>

        </Container>
      </div>

    )
  }
}
export default Contact;

Answer 1

Content is too short to be scrollable. You can add padding-bottom and margin-bottom to .contact-row so you can add space below the content and make it scrollable.