Проблема с отображением реагирующей полноэкранной целевой страницы в реакции

Question

Я разработал свой сайт, используя React- Bootstrap. Но я сталкиваюсь с проблемами, делающими это отзывчивым. Я прилагаю скриншоты и код моего сайта внизу.

Отзывчивый дисплей веб-сайта - 320x602

Здесь целевая страница имеет высоту, намного превышающую необходимо.

Фактическое отображение Я хочу

APP.JSX

import React from "react";
import MainNav from "./Navbar";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <div>
      <MainNav />
      <Home />
      <About />
    </div>
  );
}

export default App;

HOME.JSX

import React from "react";
import { Container, Row, Col } from "react-bootstrap";

function Home() {
  return (
    <div>
      <Container fluid>
        <div className="center" style={{ fontWeight: 700 }}>
          <h6>Hey! I am</h6>
          <h1>Abhuday Mishra</h1>
          <h3>
            a{" "}
            <span className="desc">
              <em>Web Developer.</em>
            </span>
          </h3>
        </div>
      </Container>
    </div>
  );
}

export default Home;

СТИЛИ. CSS

.html {
  display: block;
  height: 100%;
}

.center {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-align: center;
  align-items: center;
  margin-top: 14%;
}
.center h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  padding-top: 20px;
  font-size: 75px;
  padding-bottom: 20px;
}
.center h6 {
  color: blue;
  font-size: 20px;
}
.navlink {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin-right: 40px;
}

.desc {
  color: blue;
  text-decoration: underline;
}

.navbrand {
  margin-left: 10px;
}

.logo {
  height: 35px;
  width: 120px;
}
body {
  display: block;
  font-family: "Poppins", sans-serif;
  height: 100%;
}

.container-fluid {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: rgb(234, 255, 208);
  background: linear-gradient(
    90deg,
    rgba(234, 255, 208, 1) 50%,
    rgba(255, 255, 255, 1) 51%
  );
  background-size: cover;
}

.displaypic {
  display: block;
  text-align: center;
  position: relative;
  top: 20%;
  left: 20%;
  margin-top: 20px;
  border-radius: 100%;
}

.centerBlock {
  display: table;
  margin: auto;
}

.abouth1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-align: center;
  margin-top: 50px;
  text-decoration-style: double;
  text-decoration-line: overline underline;
}

.tablecontent {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: center;
  margin-top: 60px;
  background-color: honeydew;
}

Answer 1

Это потому, что ваш контейнер для жидкости имеет высоту 100vh, что означает, что секция будет иметь 100% от высоты вашего экрана. Вы обернули компонент Home этим классом, поэтому компонент Home имеет высоту 100vh. Попробуйте обернуть оба компонента Home и About одним контейнером.