Streaming live at 10am (PST)

Please, need a quick fix for a background video issue. Thank you


#1

Hi, I’m new to WF and having some confusing with background videos. I’ve got the video in there, and I’ve placed sections inside of it so that it will play as I scroll down the page, however, I can’t see all of the content in the sections and div’s, it’s like it only allows me to scroll half way down the page then that’s it. Also, when I resize the page now, it’s like everything is anchored to the left edge, so it doesn’t scale, or become responsive, it all just gets cut off on the right.

I have a feeling it has has something to do with the background video, but after 2 days, I’m lost.
Thank you for any help.

Mike

https://preview.webflow.com/preview/kelly-outfitters-5-7-18?preview=907cb86b67f6611abc5f9d32c8b69b11


#2

Hi @mhyusi

Welcome to Webflow!
What effect are you looking for? Do you have an example website of something you’ve seen and would like to recreate?

If you can take a bit of time to go through the Webflow university, it will help you understand the class system a little better and help you structure your elements.

It can seem a lot to take in, but we’re here to help as well! :smiley:


#3

Hi Mark, and thank you.

I’m trying to recreate this site:

http://kellyoutfitters.com/

I’m slowly figuring things out, just sort of caught on some stuff that seems like it should be basic, but my brain isn’t completely making the transition from Muse yet.

Thank you for any help.

Mike


#4

Mark,

I think I’ve got most of it figured out, but still confused why the sections/divs aren’t responsive, and why they’re so out of whack in the tablet and phone views. Everything seems anchored to the left of the page.

Thanks again for any help.

Mike


#5

Hi Mike,

If it’s not responsive it’s usually down to the way you’re sizing the elements. If you give something a pixel height or width, it will only display at that width no matter the browser window size.

To make something responsive according to the browser, use % or VH or VW. VH means viewport height, VW is Viewport width, and the viewport is whatever screen the user is using.

So, a div block with 80VW (you just type the letters in the width field, no spaces) will display the div at 80% of the users screen. Whether it’s a 32" display, or a mobile, that div will always be 80%. Likeiwse for the VH height setting.

Check for absolute settings, which mean they’re positioned absolutley within it’s parent, or Fixed which is fixed to the page.

Your share link is turned off now, but if the background video is 100VH which it was, the container inside needs a height setting, let’s say 100%, you can then add a scroll setting so that if the content in that container is longer than 100%, it will scroll.

Hope that helps a little! If you still need help, turn on your share link again and I can try and create a video for you if I get chance.


#6

Thank you for all of your help, I think I’ve got it mostly nailed down.
https://preview.webflow.com/preview/kelly-outfitters-5-7-18?preview=4b99266d92491ce2a31426f73ac82fec

Looks like there’s just some detail work I need to get through, but again, really appreciate the help. One last question, since I’m not hosting with Webflow, is there a way to still create contact forms in WF using their tools, that will send a simple email back to my client?

Thank you,

Mike


#7

Because of the GDPR you will need to use another method regarding forms, such as Zapier. I’m not 100% sure on this as my sites are all with Webflow.


#8

Heres a video to get that BG video looking better and the site scrolling.

CloudApp

Moving forward: Give your classes proper names. You’re going to struggle big time if you have div block 360 or section 46

I can safely say I learnt this the hard way! It’s also really difficult to get help as people look at all those classes and think… “nope!” (Sometimes) :joy:

Give your classes a purpose and re-use them accordingly. Don’t give the same class to a footer, and you would a mid-section element, as they’ll have different functions.


#9

HUGE help, thank you so much. I’ll rename the div’s and sections appropriately, just hadn’t gotten there yet. Thank you again.


#10

You’re very welcome.

Now or never, before it’s too late! :rofl:

You’ll thank me for it! :cowboy_hat_face:


#11

Mark, if you’ve got a minute, can you take a look now and see if I’m close to what you’re talking about as far as renaming the divs and sections?

Also, any suggestion to shorten the white space at the bottom of the page?

Thanks again,

Mike
https://preview.webflow.com/preview/kelly-outfitters?preview=4b99266d92491ce2a31426f73ac82fec