GIF sizing with background video

Hi! I am having a hard time figuring out GIFs. I am trying to build my case studies and I would like to have a few mockup gifs and I cannot seem to figure out the sizing/settings for the background video. My gifs keep getting cut out on the sides depending on the size of the browser. I’ve added a 120% bottom padding value - I did this after reading some forums… I should also mention that I am a noob to Webflow. If anyone can help, I’d VERY much appreciate it, as I have tried and cannot seem to figure it out.

Here is my read-only link - Thank you!!! :pray:
https://preview.webflow.com/preview/vanessas-trendy-project-701989?utm_medium=preview_link&utm_source=designer&utm_content=vanessas-trendy-project-701989&preview=dcbee37352aaeb76f15c9869606b1e0b&pageId=5f0dd678b93e3fc7212043fd&mode=preview

Vanessa how’s it going? It looks amazing! Super great case studies. For some reason I cannot see the GIFs. I’m not sure if that is because it is Read Only. Happy to help!

Thank you @rob_at_alpine!!! Hmm. How about this link?

https://preview.webflow.com/preview/vanessas-trendy-project-701989?utm_medium=preview_link&utm_source=dashboard&utm_content=vanessas-trendy-project-701989&preview=217b33ddceb4f1bf3e59f59ad0fc02c1&pageId=5f0dd678b93e3fc7212043fd&mode=preview

That link was much better! Thank you.

So, I’m not 100% sure how big your video is, but it seems like around 260px. So what I would do is set the width at 260px and get rid of the padding. I’ll attach a screen shot so you can see what I mean. For mobile, the smallest screen you are likely to deal with is around 320px, so even they will be able to see the video.

What do you think about that?

1 Like

THANK YOU SO MUCH!! It works perfectly now and moving forward… I will know how to do it. Thank you so so much! :partying_face: