Video Overlay Sizing

Design help General
1

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)

2

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

3

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…

4

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