Streaming live at 10am (PST)

How to get section>row>column to take up 100% of page


#1

I have a page that contains a Section>Row (two columns)> Column1 (text) & Column2 (google map).

1) I want the section, row and column2 to have no margin or padding. I want column2 to alwasy be touching the side of the browser window (when viewed on computer or ipad; aka big screen).

2) I want the section>row>columns to always take up 100% in height.

Image webpage is filled with two rectangles (blue on the left and red on the right). These rectangles take up 100% of the page in height. Blue and Red each take up half the screen (100% tall and 50% wide). No matter how much content (paragraph) is in the left side I want the red/right side (aka google map side) to always take up 100% height to match the blue side.

Right now I put a map in the right side and it only takes up 50% height no matter what height I set. Further the section or Row seems to have 20 pixel padding and I can't get rid of it.

  • Frustrated

#2

Hey man

There's 2 quick & simple things you can do here:

  1. Give each of your columns a class (call it whatever you like). You'll notice that the left & right padding values in the position box have "10" in grey. This is the webflow default for column padding - just change it to 0 and it will remove the padding.

  2. I'm assuming you're using the webflow map element? If so, give your map a class if you haven't already, and set the height to "100vh" as below. This will ensure your map is always 100% of the viewport height on all devices.

Have fun :smile:


#4

This has helped a little. When I throw the section in a page and put on the server the height of the section stops at 216px? I can see all the content as it isn't hidden, but Chrome dev tools shows the Section being only 261px but the content is 900px. Not sure why it would stop?


closed #5

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