A few responsive issues

Read Only Link

Three issues I’m working to solve:

1: the .video_wrapper on desktop. When resizing a window, the columns seem ‘stuck’ at the original window size before resizing down. this issue is fixed when I reload the page, but wondering how to make this element more responsive.


2: the .video_wrapper element on mobile (1024 and down) the background videos seem broken. especially on mobile. they are just displayed with a play button in the middle

3: classic case of page scrolling on iOS mobile while a modal is open. namely the .contact_method_div (3 in all) . I’m using class of ‘open’ and ‘close’ on appropriate elements. there are 6 modals in all on this site. 3 for each case study and 3 for different contact methods (contact, connect, careers) it seems to be working for my case study modals but not the three at the bottom of the page

Thanks for any help in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I would like to suggest replacing the Grid with Columns. I think three Columns would work just fine. You’ll have to undue several classes to get the desired layout/formatting.