Creating text that adapts to various screen sizes when displayed over a video background

I am experimenting with having text displayed over a video background that adjusts to different screen sizes. I want the text to fill up the entire screen regardless of the browser size. What would be the most effective way to achieve this?

Currently, I have a div with a className = "video-text large medium small" and some paragraph tags inside it. Additionally, I have CSS in Index.css that includes media queries for different screen sizes.

While this approach initially seemed to work, it appeared clunky when transitioning between various screen sizes. Is there a more efficient method to accomplish this design requirement?

By the way, this setup is no longer functioning properly and I'm unsure what could be causing the issue.

This is the content of 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>

This is the content of 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 (min-width: 576px) {
  .small.video-text {
    font-size: 1.5rem;
  }
}

.video-text {
    color: white;
    position: absolute;
    text-align: center;
    top: 0;
    padding: 60px;
    font-weight: bold;
    font-size: 1.3rem;
}

Here is a visual representation: https://i.sstatic.net/c4zU9.png

https://i.sstatic.net/cMse5.jpg

(Apologies for the small image sizes, larger screenshots were too big to include)

Answer №1

Experiment with including the properties display:flex and flex:1 within the div element, then adjust the text size to 100%

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending a PDF generated with jsPDF to an API without the need for downloading it from the front end

I have been successful in generating a PDF on the front end and downloading it using the code below. However, I am now faced with the challenge of sending this generated PDF to the server via an API call using fetch or Axios. Despite my research efforts, ...

develop-react-application web server to send CORS headers on response

In a unique scenario, I'm facing the challenge of needing to handle CORS headers from a server that is a create-react-app server hosting a react app. I have two react applications, app1 (port 3002) and app2 (port 3001), along with one backend (port 3 ...

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

Fullpage.js paired with a carousel

Is there a reason why two carousels are not aligning side by side when using fullpage.js? It seems to work perfectly fine without fullpage.js! In Fullpage.js, even after separating the columns for the two carousels, they end up overlapping each other. How ...

Excessive space above and below content while navigating on mobile devices

I'm in the process of creating a new website and I want the navbar to stay fixed at the top when scrolling. The issue is that on mobile devices, there is white space either at the top or bottom when scrolling. The problem arises because I have a side ...

Determine the vertical dimension of a child division once it has been integrated into an HTML document

My goal is to create a website with multiple pages without having to recreate the toolbar for each page. To achieve this, I have created a separate HTML file and CSS file specifically for the toolbar. On each page, I simply import the toolbar using the fo ...

Text not perfectly centered on the page

I'm working on a layout with 4 columns, and I want the first 3 columns to display text vertically. However, I'm having trouble aligning the text in the center of the column. Even after using justify-content and align-items properties, the text is ...

Passing data as a parameter to a page in React using history push

My Ionic React application includes functionality where the history.replace method is used to redirect users from the settings page to the login screen upon clicking a logout button. I am looking for a way to include a loggedOut flag in the redirection pro ...

Creating button text wrapping with Bootstrap 5

My goal is to design a button using Bootstrap 5 that has a unique appearance. I came across a similar post on Stack Overflow but couldn't find a solution that fits my needs. This is the HTML code I attempted: <button type="button" class="btn ...

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

Obtain the Unprocessed Product Details with the Shopify-Buy Software Development Kit

I want to create an e-commerce web application using ES6, react, react-redux, and your js-buy-sdk API. When fetching products from Shopify and storing them in the store, I noticed that I only have limited data about a product such as: { attrs, shopClient, ...

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

Building a RESTful route architecture for three interconnected categories using Express and NodeJS

I am a beginner working on an API for an online store and I need help with determining the restful route structure. We are using Node, React, Express, and GraphQL. Can someone provide guidance on how to set this up? Here is our current setup: Our stor ...

What is the best way to utilize SCSS variables alongside data-attributes within Vue JS and Bootstrap Vue?

I'm currently working on implementing a Dark Theme button for my application that can change the entire theme with just one click. Although the functionality is already in place, I am exploring ways to make this process simpler and more efficient. So ...

What is the best way to ensure that a grid header row stays aligned with the rows that scroll below it

Utilizing the Grid layout feature of bootstrap, I crafted an overview where one row acts as a header that should remain fixed at the top of the grid under all circumstances. The issue arises when the scrollbar appears, causing the layout to shift in a way ...

I am looking to remove all white spaces from my website's HTML code

I am looking to remove all white spaces from my website in html. The more I align my text to the right, the more whitespace it creates on the right side of the page. As seen in the images, there are a lot of whitespaces and I suspect that elements are caus ...

Unable to invoke a custom hook within another custom hook in a React application

I've developed a React application using create-react-app. Currently, I'm working on creating a custom hook that integrates with the Microsoft Authentication Library (MSAL). MSAL provides a custom React hook that I want to utilize within my own ...

What could be causing my Rest API request to malfunction?

Currently, I am working on a Pokedex website as part of my practice to enhance my skills in using API Rest. However, I have encountered some issues with the functionality. When users first enter the site, the API is being called twice unnecessarily. Additi ...

How can I access the fourth div element within the initial row of a multirow div container?

My current HTML structure is causing me some confusion. I am trying to create a CSS selector for the element with the text "DESIRED ELEMENT": <div class="TopDiv"> <div class="container"> <div class="row"> ...

A fixed position header adjusts based on the content's offset

In the body of my web page, I have a fixed header and a div#content element. My original intention was to have the content pushed under the fixed header using the margin-top attribute. However, I noticed that when I applied this style, the header also move ...