Streaming live at 10am (PST)

Custom code glitch


#1

Unable to troubleshoot the issue, any help would be appreciated.

Scroll down for the animation effect: http://diegocardenas.co/launch/ The script works across all screen resolutions.

When pasted into Webflow, it won’t resize the image and produces empty space on the right (resolutions over 1400px + mobile). Check out ignited.webflow.io and attached screenshot.

Script file: https://www.dropbox.com/s/zhyb2duwcsqchvk/rocket.zip?dl=0


#2

The video element in your site has width: auto and height: 100%. It should be reversed like below:

element.style {
    top: 0px;
    width: 100%;
    height: auto;
    left: 0px;
}

That should get you the desired effect.


#3

Hello @arb!

How is the elemtn.style being set? In the CSS I have the #video with 100% and I’m even trying to set the element.style in the custom code but it’s still being overwritten. Any way to hange this?

Thanks!


#4

Hi Arb, your solution worked for the desktop version. Thanks! Any ideas how to fix things for the mobile version? There is empty space on the bottom this time.


#5

On the reference site, the CSS is being managed by JavaScript. I don’t know anything about this library so I can’t really speak to how it’s implemented.


#6

Try setting width and height to 100% on the mobile breakpoint? Just speculating here.