Streaming live at 10am (PST)

Video Overlay Sizing

Hi,

I have a part of a website I’m developing where there is a ‘swoosh’ that overlays a container (this will trigger a video in a lightbox).

http://video-overlay-test.webflow.io/

Pretty happy so far, but I’m stumped as to how I can get the sizing to remain consistent - so it stays the same height across the container at all screen widths. I could insert a bunch of media queries to keep adjusting the top margin, but I’m thinking there must be a better way, possibly using css calc? Or some Javascript?

Cheers,
Jack


Here is my public share link: LINK
(how to access public share link)

looks like its working fine for me. did you find the solution?

Yep it seems to be working well enough! moves a little but it’s decent enough. Some media queries can take care of smaller devices where it breaks a bit.

It is breaking pretty badly in Safari for some reason though? Can’t figure out why… fine in Chrome and Firefox…

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.