Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about achieving this?
I attempted using flexbox to align them horizontally and then used media queries to stack them vertically when the window width is reduced. However, I'm struggling to make them shrink responsively like the ones in the video.
I won't post the HTML code since it's just a container div with image and video divs inside.
Below 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;
}
}