What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 section titled "new part" was created to highlight the issue. After some investigation, I discovered that the CSS property causing the problem is position: absolute.

<div class="col-lg-4 p-0">
  <div class="video">
    <div class="video-container">
      <div class="vid-overlay"></div>
      <video autoplay muted loop playsinline>
        <source src="hands.mp4" type="video/mp4">
      </video>
    </div>
  </div>
.col-lg-4.p-0 
    {
      height: 100vh;
      right: 0;
      top: 0;
      pointer-events: none;
      overflow: hidden;
      position: absolute;
    }

Removing the position: absolute property will make the content display correctly, but it will mess up the video's positioning, leading to overlap issues in desktop view and functionality problems in mobile view. Is there another way to achieve the same result without using position: absolute?

Answer №1

To achieve a 2 column layout with the video on the right and all other content on the left, follow these steps.

Start by placing all content inside a div, including the navbar and h1. The video should have its own div as well. Then, create a container div to hold both the content div and the video div. Finally, use flex to style the container div for the desired layout.

.overall-container {
  display: flex;
 }
<div class="overall-container">
  <div class="content-container">
    <nav>...</nav>
    <h1>...</h1>
  </div>
  <div class="video-container">
    <video>...</video>
  </div>
</div>

For improving your HTML and CSS skills, consider following me on medium where I share blogs to help you enhance your development skills.

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

Alignment of columns in Bootstrap 5 with a 'flowing' layout

In an attempt to achieve a desired layout similar to the one shown in the image above, I am seeking a solution where column widths remain consistent while utilizing non-row based columns that fill the space vertically. Despite my efforts, I have been unab ...

The Art of Validating Forms in Vue.js

Currently I am in the process of developing a form with validation using Vue, however, I've run into some errors that are showing up as not defined even though they are currently defined. HTML <form class="add-comment custom-form" @submit="checkF ...

Enhancing the appearance of each letter within a word

I am currently working on styling the word "Siteripe". Each letter should have a different color, just like it is shown on this website. I have successfully styled only the first letter using the following CSS code: #namer:first-letter { color:#09C; f ...

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

Choose an option with JavaScript once the request is successful

Choose the day, month, and year using JSON data success: function(jsondata){ var data=JSON.parse(jsondata); var list_html="<div id='editrelation'><label id='dateLabel' style='display:none&apo ...

What is the method for encoding and decoding a query string within an HTML object tag?

Within my code, I am utilizing an object tag that utilizes a data attribute to call a servlet. When passing a parameter to the URL, if the value is not in English but instead Arabic, for example, the value appears distorted when retrieved in the specified ...

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

Display or conceal toggle in ruby utilizing jQuery

I'm facing an issue with the functionality of a button that is meant to hide and show a form using jQuery. Initially, I added a path to signup in the button so that it would display and function properly. Now, when I click the button, the form shows u ...

Troubleshooting: Browser fails to update after CSSStyleRule modification using JavaScript

When making changes to CSS properties of elements using JS methods like CSSStyleSheet, insertRule, deleteRule, or CSSStyleRule.style.setProperty(), I noticed that the underlying CSS is updated but the page does not reflect these changes immediately. The c ...

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: https ...

Showcasing an image stored in an HTML file on a Vue.js webpage

I'm currently facing an issue with displaying a local image saved in an HTML file on my Vue.js page. I attempted to store the content of the HTML file into a variable using the code below: computed: { compiledHtml: function() { return this.a ...

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

stepper vue with previous and next buttons

I am trying to create previous and next buttons in Vue, but I am struggling a bit because I am new to learning Vue. I have some methods like this.activeIndex < this.activeIndex - 1 that I need to implement. Can someone help me with how to do this? cons ...

What is the best way to integrate HTML templates into AngularJS?

I am currently working on developing an HTML fragment that will eventually function as an image slider. At this point, it only consists of a test div element: slider.html: <div>TEST</div> In order to incorporate this into my index.html, I hav ...

Customizing a Google chart legend to show on hover event

Utilizing the Google Chart API, I have created a line chart to display my data. To customize the legend, I initially set the chart's original legend to none and then designed my own legend according to my preferences. While everything is functioning ...

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

The Art of Repeating: Navigating through a Multi-Layered Array

My PHP Array looks like this: $fruits = array( array("Apple", 1.25), array("Banana", 0.86), ); Desired HTML Output: I want the HTML output to be formatted as follows: Fruit: Apple Price: 1.25 Fruit: Banana Price: 0.86 Attempts Made: I tried ...

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...