How to get my 2 column divs to stack on top of each other at equal width and length at different scr-CodePudding

One div contains a video and the other text. The divs are responsive but do not stack on top of each other at equal height at different screen sizes. Here's what I've done so far:

.page-wrapper2 {
   margin: 0px;
   border: 2px solid black;
  }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
 }

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
 }

.blue-column {
  background-color: blue; // for testing purposes
  height: 100%;
}

.red-column {
  background-color: red;
  height: 100%;
  padding: 40px;
}

@media screen and (max-width: 800px) {
 .row {
   flex-direction: column;
   height: 100%;
   }
 }


  <div class='page-wrapper2'>
    <div class='row'>
     <div class='column'>
       <div class='blue-column'>
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
   <div class='column'>
     <div class='red-column'>
      <h2>Red Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <button>Watch today</button>
      </div>
    </div>
   </div>
 </div>

See my current result and now sure how to make the video larger:

https://jsfiddle.net/EF__1000/wzabLqcr/2/

CodePudding user response：

You can do this with a bit of javascript as follows. More on getComputedStyle here

window.onresize = (event) => {
  const bluecolumn = document.querySelector('#blue-column');
  const elementComputedStyle = window.getComputedStyle(bluecolumn);
  const redcolumn=document.querySelector('#red-column');
  redcolumn.style.height = elementComputedStyle.height;
  redcolumn.style.width = elementComputedStyle.width;
};

.page-wrapper2 {
  margin: 0px;
  border: 2px solid black;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  // margin: 5px;
}

.blue-column {
  background-color: blue;
  height: 100%;
  padding: 40px;
}

.red-column {
  background-color: red;
  height: 100%;
  padding: 40px;
}

@media screen and (max-width: 800px) {
  .row {
    flex-direction: column;
  }
}

<div class='page-wrapper2'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column' id="blue-column">
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
    </div>
    <div class='column'>
      <div class='red-column' id="red-column">
        <h2>Red Column</h2>
        <p>Text in Red Two</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Maybe missing <meta name="viewport" content="width=device-width, initial-scale=0"> in the head section? This piece of code is usually needed to make web pages responsive.

CodePudding user response：

Try to include this line in your HTML head tag. It will ease your content responsiveness.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here is an in-deep explanation from W3Schools