Black Space Below Embedded Video

Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height.

I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px).

Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me.

Thanks in advance!

Link to the website/page: https://steerforward.com/case-study

18 hours ago, ThomasDes said:

Hello! I've been trying to work out this issue with my Squarespace site for the longest time. Black space appears below a Vimeo embedded video on my page hero. It's not margin or padding, nor is the block too short to cover the full height.

I've tried many different approaches with custom code but none of them seem to work. This issue is present only on mobile (below 768px).

Any ideas on how I could solve this are welcome. I'll be happy to provide any additional info or code you need from me.

Thanks in advance!

Can you share your URL so I can check it?

On 5/30/2024 at 12:33 PM, Beyondspace said:

You can try the following custom CSS

@media only screen and (max-width: 767px) {
  section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner {
	padding-top: 170%
  }
} 

 

THANK YOU! I adjusted it for what I needed and ended up with this:

  @media only screen and (max-width: 420px) {
  section[data-section-id="6639022d0cfdda1b60124005"] .intrinsic-inner {
    padding-top: 20%
  }
}

Worked like a charm. Thanks.