spacing between videos inside a div not getting applied

Question

I have a main div called shelf2 with a height of auto. It has 2 divs inside of it. One is a list of divs with the same class name and height and separated by a 2vw row gap. Beside it is a container named rightAdCon with 3 random videos inside it. Now the problem i have is in the class rightAdCon. I set the 3 videos inside of that div to have spacing/ row-gap of 0vw but it's not getting applied to it. The videos always have spacing between them even with row-gap specified to 0vw. To debug i replicated the same code of class rightAdCon under the main div (shelf2) and gave it a new class name (rightAdCon2). Now on this div the row gap i specified works and the spacing between the videos will get removed. This shows that there is something inside the shelf2 container interfering with the spacing I specified but I cant figure out what. How can I make the spacing between the videos in the class rightAdCon to 0vw just how it is in the replica under it (rightAdCon2). Any help is appreciated. Thanks in advance.

EDIT: Maybe because I used static measurement on the rightAdCon height. I set it to 100% changing that to a relative measurement like height 90em is something I thought of but didn't work but I got a feeling its something related to that.

// just code to make the rightadcon2 positioned under shelf2 js code has noting to do with the question

$('.rightAdCon2').css('top', $('.shelf2').offset().top + $('.shelf2').height() + 20)

.shelf2 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: pink;
}

.shelf2 .otherItems {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  row-gap: 2vw;
  position: relative;
  top: 0%;
  left: 15%;
  width: 60%;
  height: auto;
  background-color: purple;
}

.shelf2 .otherItems .beat3 {
  width: 100%;
  height: 7em;
  background-color: blue;
}

.shelf2 .rightAdCon {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  /*not getting applied*/
  row-gap: 0vw;
  position: absolute;
  top: 0%;
  right: 1%;
  width: 15%;
  height: 100%;
  background-color: green;
}

.shelf2 .rightAdCon .adCon {
  height: 25%;
}

.shelf2 .rightAdCon .adCon video {
  width: 100%;
  height: 100%;
}

.rightAdCon2 {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  /* this is getting applied*/
  row-gap: 0vw;
  position: absolute;
  top: 0%;
  right: 1%;
  width: 15%;
  height: 100%;
  background-color: green;
}

.rightAdCon2 .adCon {
  height: 25%;
}

.rightAdCon2 .adCon video {
  width: 100%;
  height: 100%;
}

user_10772995 · Answer

Can I ask why you're using viewport width (vw) as your units everywhere?

I think in this situation it would make more sense to set row-gap: none; or row-gap: 0; in this scenario. vw should only be used when you need a unit relative to the screen width, which in this case, you don't.

Let me know if that helps.

user_14548500 · Answer

always have videos inside a div, give the videos properties of object-fit: contain or cover and only manipulate the spaces between/sizes of the divs

PS: to keep the divs always the same sizes give them the property of aspect-ratio: 16/9 or 1/2 or auto...

spacing between videos inside a div not getting applied

2 Answers