Streaming live at 10am (PST)

Problem with a responsive grid


#1

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


#2

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).


#3

Oh man, you're the best! Worked like a charm. Thx much!


#4

@joe Glad it helped man!

Happy Webflowing :smile:


#5

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?


#6

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