Flexbox vs Columns Issue

Hi, im trying to create a section with 2 equal size boxes. One with title and text in it where the height is adjusted according to the padding. In the other box I want to have a video of an iPhone playing on loop, covering the entire box whilst staying the same height as the text box.

I have experimented with both the flex box and columns feature as well as with Webflow’s built in background video and embedding custom html5 video code. The problem that I’m getting is that the box with the video in it does not stay the same height as the one with the text in it. (I know that the flex box feature is suppose to adjust to the “tallest” of the two boxes).

But I can’t seem to get it to work so if anyone has some experience with this or know a way to achieve this it would be really helpful.

EDIT:
Sorry for not providing enough information, haven’t posted a lot here before.

Here is a read only link:
https://preview.webflow.com/preview/flymotion-concept-d5e2128d00a9021502dd7?preview=80ac06df9258cd36fc8c246130ae670c

And here is a published version:
http://flymotion-concept-d5e2128d00a9021502dd7.webflow.io

The Box Section is where I’m trying to achieve this and my goal is to have 2 videos, one in each row. In the links I have provided I’m trying with flex box since columns does not adjust height the way I want to.

Right now the video is scaling but the flex box height is set according to the video box and not the text box and my hope is to have to video box be the same size as the text box with the video filling the box with overflow hidden on the sides.

Here is a link to the video clip if necessary, http://www.flymotion.se/Iphone-Screen.mp4 (Size 2.6MB 1000px x 750px 4:3 aspect ratio)

Best would also to be able to stack the boxes on top of each other on mobile sizes.

Video

Screen Recording

Screenshot from Sketch of what I’m trying to achieve

Thanks!

please provide your share link. So we can try to help

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!

@jbleroux @samliew I have edited my questions with details you mentioned. Thank you guys for helping out a newbie!:sweat_smile:

No problem, Johan we were all beginners once. I’m still constantly asking for help from @samliew and others pushing the limits of what is possible with Webflow.

Is this what you are looking for?

The background video will take up the same height as the text block beside it

To achieve this. Simple fix. Set the device block to position relative. Give the background video a height of 100% Keep in mind it is a background video so it will automatically set to centered and cover, and depending on device size it won’t be visible with all the nice borders unless your height is set to that particular ratio.

let me know if you need any other help.

Jeremy

Hi @jbleroux, what you are describing is exactly what I’m trying to achieve however when I set the device block to position relative and the iPhone video to 100% height the background video disappears (Looks like it gets 0px in height). Maybe I did something wrong?

I have updated the website so you should be able to check what I did with the read only link.

Thanks

Hi Johan ,

Is it just the last mobile view you are having issue with?

@jbleroux Yes I probably should have mentioned that I’m trying to achieve it on both but have so far just tested it on the lower row (The one with the iPhone box)

Background video doesn’t operate on mobile. So you may want to hide the bg video from mobile and use an image instead. I see you have taken the flex off for mobile. that is good. It works better that way. Because they are background properties when not in flex they have no height assigned which is why it does not show up. If you give a height they will appear. For instance give the device3 block a height of 300px. You’ll see what I mean.

Good thing to remember for any bg image or video. It is always the size of the container or div it is in. If it doesn’t have a height it won’t show up.

1 Like

@jbleroux Aha now I understad what you mean! I misinterpreted your previous answer but I got it working now for “laptop” size and I was going to create a separate design for mobile anyways and maybe even tablets. Thanks you for all the help!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.