Hi,
After watching a ton of Webflow videos and tutorials I still don’t know how to create the following extremely simple section:
It is a section that has 2 columns, each with its own background color. The width of each column is 50% and the height should be 100% VH. Also, they must extend to the edges of the screen.
There are 2 text elements that are flowing in the middle of the page. Here’s a (very) rough mockup:
• I started by creating a Section.
• In that section I tried adding a Container but the Container doesn’t stretch all the way to the edges of the screen so I abandoned the idea.
• I tried adding a Grid with 3 columns and 1 row, adding a Text Heading element inside the middle cell. I can’t get it to flow over the two side cells. Also, the 2 side cells tend to disappear off the screen when I am trying to figure out the position of the middle cell. I cannot understand exactly what to do to bring order to this chaos.
• I tried creating 1 Div block, and adding 3 Div Blocks inside that Div block instead of a 3x1 Grid. Still can’t get the middle Div Block to flow over the 2 side Div Blocks.
• Another constant mystery to me is what is the right way to set up the 2 side columns (the one with the Grey background and the one with the White background) in terms of width and height? What are the correct settings?
Here’s one of the numerous attempts I made:
So, how would you set up this 2-column and floating text in the middle design?
Thanks,
Panos
