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?


#5

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