Prevent two divs from overlapping?

Hi, im trying to make my tribute page responsive, but my video and image divs which are right next to eachother, keep overlapping at certain points when increasing the browser size. Also, how do i make it so that the video expands at the same rate and in the same line as the #italic div? Thanks.

Hi,
try to make the iframe static .
If you want to align it with the wide box below change its ‘right’ property to 0 and change the right margin of the parent div.
best regards

Hi i made the iframe static but it still overlaps with the image when i expand the browser.

you’re using css grid so you may not want to overlap them

iframe{
  width: 20rem; // 100%
}
img {
  width: 40vw; // 100%
}

the image will be stretched so you may want to use object-fit.
not well supported by IE though, as expected.
if you’re concerned with the IE users you could use a polyfill.

img {
  width: 100%;
  object-fit: cover;
}
1 Like