Problem with Webflow Tutorial video

Hello,
These tutorial videos are amazing and they are really helpful when trying to learn how to accomplish something in Webflow. However, I have found that they often stop short on one specific issue: what happens to the layout on other breakpoints?

Here is a good example:
https://help.webflow.com/video-tutorial/create-a-split-screen-layout-with-flexbox

This is a great little video and really helped since the layout is exactly what I am trying to accomplish, but there is no explanation has to how to handle this on a mobile breakpoint.

Here is my sample:
https://preview.webflow.com/preview/flexbox-test-5efb7f?preview=3ce684c1ae4d36a2e671b29bdd927b6e

The trouble is, I do not know how to change this to fit on a mobile device, so that the left panel is full width but stacked on top of the right panel. Also what if there are more divs under the flex parent div? I want the two panels to take up 100% viewport, but the page will still need to scroll.

Any advice? I am stumped. I have one or tow solutions but they seem to be more of a hack than a solution.

Any help would be greatly appreciated!


Here is my public share link: LINK
(how to access public share link)

That should do the trick. Just change the Flex direction for the item FLEX PARENT on your mobile layout and everything gets stacked on top of each other.

1 Like

D’HOH! I thought I tried that! Maybe I did it to the wrong div! Thanks so much! I guess I am an idiot… :frowning:

Thanks again for the reply, I feel dumb for missing that, but live & learn I guess. I do have a quick follow up that maybe you can answer. On mobile, the Flex parent is still set to take up 100 vh, but on my device the left div only takes up half of the viewport and the right div just scrolls.

Here is the project link: https://preview.webflow.com/preview/kb2017v3?preview=9bc8373e98afa1cac6cefd70da94ef54

It works great, I am just trying to understand “how / why” it works…

You’re defining a min height on your parent which includes both parts (left&right…respectively top&bottom on mobile) so the behaviour is correct. If you also want the left part (with the cat image) to fill up 100vh on mobile you should define it for the inner div SIDEBLOCKS IMG BKG on mobile :slight_smile:

1 Like

Ok thanks! Thanks again for the help! I did the “Flexbox” game that Webflow has, and I understand it to a point, but it still confuses me a bit. I really appreciate you taking the time to answer my question. You saved me a lot of time.

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