Trying to duplicate flexible banner as seen in vid…

Im trying to duplicate something like what is shown in the video. I have 2 blocks of div. One containing a random image and another a video and im trying to make them flexible and identical as possible to the video. How can I approach this?

I tried using flex box to align them horizontally then media query them to go vertically when the width of window is smaller. However I cannot get it to shrink like the one in the video.

Html code im not gonna upload because its just a container div with image and video div inside it.

Here is my css : 

.container {
  max-width: 1400px;
  display: flex;
  justify-content: center;
}

.image {
  height: 45vh;
  width: 70vh;
}


.video {
  height: 45vh;
  width: 70vh;
}


@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

}

Answer

Here you go, I made max-width 900 for sake of demo on codepen, you can now tweak them.

.container {
  max-width: 900px;
  display: flex;
  justify-content: center;
}

.image {
  width: 100%;
}


.item {width:50%}
@media screen and (max-width: 768px) {
  .container {
   display:block;
  }
.item {width:100%}

}

  <div class="container">
 <div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
<div class="item"><img class="image" src="https://via.placeholder.com/350x150"></div>
  </div>

Trying to duplicate flexible banner as seen in video

Advertisement

Answer