How to make a responsive text for different view size over a video background

Question

I'm trying to have text over a video background and regardless of what screen size the web browser is, I want the text to take up the entire screen. What is the best way to do this?

Currently, I have a div with a className = "video-text large medium small" with a few

tags in it. Then I have some Css in Index.css that is @media (min-width:992){.large.video-text{font-size:2rem}} and so on.

This started to work but looked clunky when switching to between different screen sizes. Is there a better way to do this?

BTW, this isn't working anymore for some reason. Idk whats going on.

Here is my AboutComponent.js:

<div
        style={{
          position: "relative",
          textAlign: "center",
        }}
      >
        <video
          loop
          autoPlay
          muted
          id="video"
          style={{
            height: "100vh",
            width: "100vw",
            objectFit: "cover",
            position: "relative",
            pointerEvents: "none",
          }}
        >
          <source src={Video} type="video/mp4" />
        </video>
        <div className="video-text large medium small">
          <p>
            Aloha, I’m a front-end developer located on the island of Oahu,
            Hawaii. I have a serious passion for technology and learning all the
            things to make technology work for me.
          </p>
          <br />
          <p>
            When i’m not tinkering with the latest gadget, you can find me
            surfing Hawaii's waves, on a beach volleyball court or vacationing
            at a ski resort breaking another collar bone.
          </p>
          <br />
          <p>
            Other than sports and technology, I am very much a family person and
            faith oriented. Both keep me grounded and make me want to be the
            best version of myself.
          </p>
          <br />
          <p>
            Overall, im trying to meet like-minded people who can mentor me to
            make me a stronger Web Developer, a smarter employee and a more
            wholesome and selfless person in general.
          </p>
        </div>
      </div>

Here is my Index.css:

@media (min-width: 992px) { 
    .large.video-text {
        font-size: 2rem;
      }
   }

  @media (min-width: 768px) { 
    .medium.video-text {
        font-size: 1.7rem;
      }
   }

   /* @media when the width of the web page is 576+ APPLY NEW STYLE */
@media (min-width: 576px) {
  .small.video-text {
    font-size: 1.5rem;
  }
}

/* default css styling  -- baseline for the about page*/
.video-text {
    color: white;
    position: absolute;
    text-align: center;
    top: 0;
    padding: 60px;
    font-weight: bold;
    font-size: 1.3rem;
}

Here is what it looks like:

(Sorry for the small images, the other screenshots were too large of files)

Answer 1

Try to add display:flex and flex:1 to the div and set the text size to 100%