I have a page that contains a Section>Row (two columns)> Column1 (text) & Column2 (google map).
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).
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.
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.
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.
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?