Streaming live at 10am (PST)

Hi, I'm going to need lots of help :)

Hello!

I’m Kristine and I just startet my own design- and video studio with my man. I am building our website in webflow, but I didn’t get far before I ran into problems. This makes me incredibly frustrated, not knowing how to solve it and why it is doing the opposite of what the tutorials are doing! I’m impatient and want to figure it out asap, but I have no one to ask.

That’s why I need your help.

Regards,
Kristine

Hi,

Please can you specify exactly what it is you need help with, and post a read only link to your site?

Thanks :slight_smile:

Hello. I’m trying but I get a window saying I am creating topics too quickly and I have to wait 3 minutes… Aaaand now it’s saying I am replying too quickly! What is the deal with this?

Anyway here’s what I wanted to post under the design help-category:

Hello!

I’m a newbie, and working on my first website. Basically collumns are not stacking on mobile. I want to boxes next to eachother, one with background video and one with text. Obviously I want them to stack on top of eachother on tablet and phone devices, but they refuse to do so. On tablet and mobile they are two looooong strips next to eachother.

It is driving me crazy! Please help me, before I lose patience and throw my computer out the window :frowning:

Read only link below:

https://preview.webflow.com/preview/kastleblack-website?utm_medium=preview_link&utm_source=designer&utm_content=kastleblack-website&preview=d9726708c8b13d5f91d1c83a903f68fa&mode=preview

Kind regards,
Kristine

As you’re a brand new user and this is your first post so I Imagine there is a limit on frequent new users on the forums can create topics in order to prevent people from spam posting…

Anyway,

You have the positioning set to relative on the columns. If you set them to absolute on the mobile/tablet breakpoint it should work.

Ok, thanks. Of I change the box which contains collumns to absolute, it disappears. So I’m changing the collumns one by one, and they’re stacking now. but they do lots of weird things, such as the colour box is now on top of the video on the mobile, and on the tablet it is too thin, I mean not tall enough. I don’t understand anything here I’m afraid… :frowning:

How can I fix this?

Are you wanting them to look more like this?

Or like this? :slight_smile:

Let me know and I can explain how to achieve the desired outcome :slight_smile:

1 Like

Aaaah, finally! Thanks Nicole, definitely the first one. How on earth did you manage to do this?

:smiley:

Make both ‘Columns’ position: static (using absolute positioning will put things on top of each other -literally) :slight_smile:

Thanks, but that’s not working. Now the video has jumped up to the top of the page. See screenshot:

Okay :slight_smile: Try giving the Columns a height of 300px. The make the video position: relative with a width of 100%

Thanks Nicole. I have done this, but the video is no longer showing up… Where did it go?

Sorry, also make the video’s height: auto :slight_smile: You have it set on 0px.

Thanks Nicole, that worked, but the video is not playing on mobile when I go to preview it… Why is that?

Also, the video has disappeared from the mobile landscape even though I have put in the same settings… :frowning: :persevere:

Aaaand, lastly, the video seems to be zoomed in on tablet and mobile, and I need it to not do that, it should display as much of the “image” as possible. How do I do that?

When I changed the Flex Direction of the video element to Horizontal instead of Vertical the column shows on rotated mobile.

Regarding the ‘zoom’ - this is directly related to the height of the object. Reducing this height will reduce the zoom; it’s keeping the image perspective, so if you increase the height of the container it will zoom in to retain a ‘good’ view of the image.

You need to make sure that you change the parent container from “Static” to “Relative” positioning, otherwise the Absolutely-positioned container won’t know where to go.

Thanks everyone for your help.

I solved most of the issues, but I still don’t understand why the video is playing on desktop and tablet, but not on mobile landscape and portrait.

Why is this?

Something I did find was: “background videos may not autoplay on touch devices if a site visitor has enabled data saver.” :slight_smile: Perhaps that could be the problem? I will look into it some more and let you know if I figure anything out.

Happy Webflowing!

These may be helpful:

That’s great, thanks a lot. I will try it, but where do I edit the code? I can’t seem to access the code anywhere…

Thanks

Good morning. Please help: where do I actually paste the code? And I don’t mean where IN the code, but how do I access the code from the Webflow designer?

Thanks!