Can I get some help with a couple of issues on my site? (video and footer alignment)

Design help General
1

I am working on a site for a taco festival, and I have run into some issues that I am not able to resolve. I’m hoping someone can help me figure out the issues. I have included a Read-Only link at the bottom of this post.

1. Embedded Video is not showing up.
On the home page, I embedded a background video. The video is an mp4. It shows up as a thumbnail in the “background video settings”, but it will not show up on the site, even when it is published.

2. Footer sections are not lining up.
I need a large footer with a graphic that is supposed to tie in the footer with the body. I created a “top-footer” section with the graphic and a “footer” section with the footer content. For some reason, the two sections tend to overlap a bit which cuts off the graphic. I’m sure I’m doing something wrong, but I can’t figure out what it is. The overlap is visible in the share link, but here is an image of my sketch of what it’s supposed to look like:

footer
footer1033×633 233 KB

Those are the two issues I have at the moment that I hope someone can assist me with. Any assistance would be greatly appreciated. And if I forgot to include any relevant information that would be useful in troubleshooting the issue, please let me know and I will do my best to provide it.

Thanks in advance for any assistance and tips.

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

2

Hi @Lou667

Can you also provide the published link?

Also which browsers/devices are you seeing this on…

Update: The video just needs z-index adding - even a ‘1’ will work - so that’s problem 1 resolved :grinning:

3

Hey @StuM

Thank you!!! :grinning: That was a perfect fix.

And for the published link, here it is: http://nj-tacofest-2018.webflow.io/

As for the browser, I’m using Chrome… Version 65.0.3325.181 (Official Build)

4

Glad to hear it!

Re: the footer sections - it’s difficult without being able to publish, but try making both ‘relative’ positioning, and the bottom hands image ‘centred’ and set to ‘cover’ in the image settings.

I can only test it in the ‘preview’ mode but it seems to behave itself as I change the screen sizes.

Hope that sorts it - let me know!

5

Hey StuM, that was a great suggestion. Unfortunately, it didn’t quite work that well for me. I was still having issues with the bottom of the image being covered with the bottom footer section. So I tried a different approach. I’ll write out what I was doing and what I changed to make it work, in case anyone else is looking for a similar solution.

Originally, to create the “whole footer”, I used a section (top-footer) with the image and another section (footer) with the sponsor logos and info. For the top-footer, I used a section with a transparent background and added an image as a background with the footer color on the bottom half, where it is supposed to be cut off. Here is the image I was using:

Bottom-Hands2
Bottom-Hands21440×533 419 KB

The image was set as the section background, set as a cover, with a ‘centered’ alignment.

It seemed like a good idea, but for some reason, the image bottom on the top-footer was being cut off by the top of the footer section when the site was published. I experimented with controlling the section size, margins, and whatnot, but nothing worked. I also tried StuM’s suggestion, and it did improve it a bit, but there were still a few issues with alignment and a slight overlap at different breakpoints. But when I was applying StuM’s solution, something clicked and I decided to try a different approach.

For the solution, I made the top-footer section with the blue background. I added a div and made it a vertical flex-box. Inside the flex-box I added an updated image with a transparent background. This image:

hands
hands1440×550 425 KB

Then I added a large top-margin to the top-footer section in order to clear the content, set the alignment on the flex-box to - Justify: Start, and Align: Stretch, and lastly, I added a negative top-margin to the image to bring it up and align it with the blue background of the top-footer section. (I had to adjust this negative margin for the different screen sizes)

But when I was writing out what I did, I realized that I could simplify it even more. So my final solution was to get rid of the top-footer section altogether. I just took the flex-box and the image and dropped them directly into the top of the footer section and adjusted the margins and padding.

That was it and now it all works. In retrospect, I should have done this from the start. I seem to have a problem overcomplicating things sometimes.

Anyway, I really appreciate your help StuM. For the video solution and for the inspiration with the footer issue. :grinning:

I hope my explanation can help other novices avoid overcomplicating things.