Streaming live at 10am (PST)

How do I structure this layout?

Hi guys,

I started learning the basics of Webflow about 2 Weeks ago by watching the 101 Course Videos + some others. I would say I understand the basics of the Box Model or Flexbox and how to use Sections, Containers, and Divs.

It was pretty easy for me to follow along with tutorials based on existing example websites/layouts. However, I am struggling to figure out the correct logic/setup for my own layout. I feel like even though I understand the basics, because of the lack of practical practice, I don’t have the ability/imagination to come up with solutions myself.

Before I dive into my question, here is a link to my wireframe in two different screen sizes, to show what behavior I am trying to achieve. The blue boxes are supposed to be images placed inside a grid (image sizes depending on breakpoints). The green boxes are images with a fixed size, while the left/right lanes should adjust in width depending on the screen size (also I want to make those images scroll parralax-like).

https://xd.adobe.com/view/8fba63c3-fb30-431c-a797-f3b8032a171d-dae9/specs/

So my question is, how should I set up the left/right lanes?

The main section is pretty clear to me. It is a section with a container (and that container holds a 12col grid). Depending on breakpoints the Max Width of the container will have to be defined.

But what are the left/right lanes? Should those be divs? And what would be their width-value (screen size minus container width)? Do they have to be relative to the main section?

Thanks in advance to everyone who will try to help me! :slight_smile:

Mike

Hey!

I did not check the 101 courses. But I did this one: Complete Web Design: from Figma to Webflow to Freelancing | Udemy

In Part 3 he explains everything in Webflow. And it is crazy how well explained. Also, he gives a lot of tips to improve development in WF.

Cheers

The structure would be

Make a div box(you call it container. The container element in WF is limited. Then you make your own container). That container will be Flex. Inside that felx you put 3 div boxes(left box, center box, rigth box).

That would be my structure.

You can check this template in designer and copy what you like: Milton - Blog HTML5 Responsive Website Template

Cheers

I must say, I am still kind of lost here :confused:
I can’t seem to get it done the way I imagine it to be. Maybe my explanation was not simple/clear enough?

I basically want to have a center-aligned container with a max-width and grid inside. To the left and right of the container should then be two divs, which share the remaining space/width.

I have finally found the answer to my question. It was pretty simple.

First I had to set the left/right lanes to flex-grow. Secondly, I was previously using the “container” element for the content area in the center. I have now created my own container using a div block, which now makes it work.

Here is the read-only link:
https://preview.webflow.com/preview/likemike?utm_medium=preview_link&utm_source=designer&utm_content=likemike&preview=942710dc11297761bdc27e16b3e95632&pageId=60c677c4582c3550d2c27168&workflow=preview

Now my only question is, is my “self made container” set up in the right way?
I am really not sure if this will do the trick for my purpose (see Wireframe in first post).

Thank you for your help!