Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to use a video as the background, but I'm unsure if it's possible to set a video as the background directly in CSS. Any guidance is appreciated.

/* font-family: 'Sedgwick Ave'; */
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');

/* font-family: 'Bebas Neue' */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* font-family: 'Nunito' */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: 100%;

    /*     border:1px solid red; */
}

/*General Styles*/
html,body {
    font-size: 62.5%;
    /* background-image: url('/images/home-page-bg-black.jpg'); */
    width: 100%;
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
}


nav {
    position: relative;
    height: 100vh;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
  }

nav a{
    text-decoration: none;
    font-size: 2.2em;
    color: white;
    margin-top: 2%;
    font-family: 'Bebas Neue';
}

.boxes{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.box{
    background-color: red;
    position: relative;
    width: 10%;
    height: 80px;
    display: flex;
    align-content: center;
}

.box h4{
    text-align: top;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles/index.css">
</head>

<body>
    <div id=".container">
            <video autoplay muted loop poster id="myVideo">
                <source src="/images/Cyberpunk1-1 (2021_04_28 20_59_30 UTC).mp4" type="video/mp4">
            </video>
        <nav>
            <a href="#" id="nav-home">Home</a>
            <a href="#" id="nav-about">About</a>
            <a href="#" id="nav-project">Projects</a>
            <a href="#" id="nav-contact">Contact</a>
        </nav>
        <div class ="boxes">
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
        </div>
    </div>
</body>

</html>

htmlcss

Answer №1

Are you satisfied with this solution?

List of Modifications:

  1. Change the class name to 
    <div class="container">
  2. Add these lines in CSS for .boxes
    position: absolute;
    top: 0;
    left: 0;
  1. Add some internal spaces in CSS for .box
padding: 10em;


/* font-family: 'Sedgwick Ave'; */
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');

/* font-family: 'Bebas Neue' */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* font-family: 'Nunito' */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: 100%;

    /*     border:1px solid red; */
}

/*General Styles*/
html,body {
    font-size: 62.5%;
    /* background-image: url('/images/home-page-bg-black.jpg'); */
    width: 100%;
    height: 100%;
}

.container {
    height: 100%;
    width: 100%;
}


nav {
    position: relative;
    height: 100vh;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
  }

nav a{
    text-decoration: none;
    font-size: 2.2em;
    color: white;
    margin-top: 2%;
    font-family: 'Bebas Neue';
}

.boxes{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.box{
    background-color: red;
    position: relative;
    width: 10%;
    height: 80px;
    display: flex;
    align-content: center;
    padding: 10em;
}

.box h4{
    text-align: top;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles/index.css">
</head>

<body>
    <div class="container">
            <video autoplay muted loop poster id="myVideo">
                <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
            </video>
        <nav>
            <a href="#" id="nav-home">Home</a>
            <a href="#" id="nav-about">About</a>
            <a href="#" id="nav-project">Projects</a>
            <a href="#" id="nav-contact">Contact</a>
        </nav>
        <div class ="boxes">
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
            <div class="box"> <h4>TEXT HERE</h4></div>
        </div>
    </div>
</body>

</html>

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

Troubleshooting the onExited callback issue with Popover component in Material UI

<Popover key={element.name} classes={{ paper: classes.paper }} open={open} anchorEl={this.myRef.current} anchorOrigin={{ vertical: ' ...

javascripthtmlcssreactjsmaterial-ui

Can you use ng-show within ng-if in Angular?

How can I make this input only show a property is true per the ng-if? The current code looks like this: <input type="button" class="naviaBtn naviaBlue" ng-if="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)" value="outstandin ...

javascripthtmlangularjs

Is there a way to get this script running on WordPress?

I'm working with this JavaScript code: $(document).ready(function(){ $("text1").click(function(){ $(this).hide(); }); }); Here's the HTML code: <div class="div1"> <p class="text1">text to appear when the user p ...

phpjqueryhtmlwordpress

Chrome Experiencing Issues with Nested Divs

Having an issue with nested divs in Chrome <div id="wrapper"> <div id="content"> </div> </div> The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistentl ...

htmlcssgoogle-chrome

Enhanced spacing of characters in website text

Currently working on a client's website, I find myself once again being asked by my boss (who is the designer) to increase letter-spacing in the text for aesthetic reasons. However, I strongly believe that this practice can actually lead to eye strain ...

htmlcss

Insert the characteristics of the object into the header of the table, and populate the rows of the table

I have created an HTML table that displays specific object properties when the mouse hovers over a designated object. For example, hovering over the dog object will display the dog's name. I want to expand this functionality to also show the cat' ...

javascriptjqueryhtmlarrays

Flexbox problem - uneven heights

I have set up a flex box layout and you can view the codepen link here:- https://codepen.io/scottYg55/pen/zYYWbJG. My goal is to make the pink backgrounds in this flexbox 50% of the height, along with the background image so it resembles more of a grid sy ...

jqueryhtmlcss

What is the best way to ensure a footer always remains at the bottom of the page with Telerik controls?

I'm currently working on an asp.net MVC project that utilizes the latest version of Telerik controls. The layout consists of a shared view with a header at the top, a left-side menu, and a footer at the bottom. In the main section, I use a @RenderBody ...

cssasp.nettelerikkendo-gridsticky-footer

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...

javascriptjqueryhtmlcss

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

htmlcssdirectory

What is the best way to show the current value of a checkbox element in the future?

I want to add multiple checkboxes using this method: $(".btn-sample").on("click", function() { $(".container").append( '<input class="check-sample" type="checkbox" value="'+check_value+'"/>' ); }); The issue I' ...

javascriptjqueryhtmldomcheckbox

Struggling to incorporate a logo into the navigation bar for an HTML project

I'm a beginner in the world of HTML and CSS, trying my hand at creating a homepage. While I managed to add a logo to the Navigation bar, it seems to have messed up the link for the HOME page. Could this be due to not wrapping the logo in a div or imp ...

htmlcss

Is there a way to organize nested tabs in R markdown so they are displayed separately instead of all being shown side by side?

Hello, I have a question regarding separating sub tabs and not displaying them all side by side. I have tried multiple codes to create two subtabs, each containing a different graph, and then displaying the other two sub tabs below them with different type ...

htmlrr-markdown

Body of the table spanning the entire width of the screen

Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...

htmlcss

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

Caution: It is important for each child within a list to have a distinct "key" prop when using react-input

I'm currently facing an issue with the following code snippet: {array.map((item) => ( <> <input key={item.id} type="checkbox" /> ...

javascripthtmlreactjs

Tips for determining the actions of a node prior to its inception

Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...

javascriptjqueryhtmldom