Hi!
I have a responsive grid made of four rows and tiles in each row that works pretty well, but I have this one weird gap at the bottom of the screen that only occurs sometimes. Why aren’t my rows filling the page?
https://preview.webflow.com/preview/joealterio?preview=587b565bb789c2bc103bc9b63b6e3ac2
Hey @joe - First off, great work.
Using the x-ray mode reveals you have this overflow issue because your list elements inside the boxes are set to 100% of the box height and then are moved 30% moved down. This is creating that 30%-of-the-box-height empty area (whitespace) that you see at the bottom of the page.
To fix the issue, set row4 to overflow: none. (You can set the other rows to overflow none as well if you desire).
Oh man, you’re the best! Worked like a charm. Thx much!
Hi, just one more question, if it’s not too much trouble.
As it stands now, the rows only display the first two of tiles in each row when the screen is reduced to mobile size. I’ve adjusted the Rows to display as tiles, but I assume it’s something to do with the % of value within either the rows, sections, or tiles?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
