Streaming live at 10am (PST)

Grid Not Working after Publish

Hello!

I’m having issues with my grid on a collection page template for my company’s blog. When in Designer mode, the grid looks perfectly fine. But when I publish my site, the content moves all over the place and doesn’t seem to be in the columns they are supposed to be in. I’m using a 3x2 grid and have most of the blog content in row 2 column 2, but when published most of the content scatters and moves to column 1 or column 3.

Any insight into this would be forever appreciated! I’ve tried cutting out the section entirely and pasting back in and removing a couple of new symbols I’ve added, but all with no luck.

Here’s what it looks like in the Designer:

Here’s what it looks like when published:


Here is my site Read-Only Link

Here is the live site:
https://www.jovio-sand.team/blog/home-buyers-guide-to-closing-costs

@erika.marquez Hello Erika. Try setting the empty column width (column 1) to a certain number of pixels, or a percentage, instead of FR.
I used have similar issues until I realized that FR means Fractional, and is relative to the content inside the column. If you put a 100px Div inside the column and set it to 2FR, the column width will be 200px. So if empty, the total width will remain zero.

Let me know if this helped. Cheers!

@Mr_Finn thanks so much for the quick reply!

I just tried adjusting the empty column using a percentage, but that didn’t work. I then tried applying a percentage to all columns, but same thing. I also tried adding a pixel number to the empty column but that also didn’t work :confused: nothing seems to change when I published the page even with the adjustments.

Oh, weird. I guess your issue has a different source than my case.
This COULD be a browser issue (I’ve seen some threads where grids work differently between safari and chrome, but honestly I never had that issue myself). Are you seeing the same results on different browsers?

Other issues could be parent/child dimension width settings that, overall, are affecting the relative sizes (therefore positions, since first column is empty) of the columns.
So, just to be thorough, try the following:

  1. Set your “section” div to 100VW (maybe for some reason the Auto makes it change in size and therefore changes the position/width of the columns relative to the grid)
  2. Set your “grid–resources-content” width to 100%, so it takes on the exact size of the parent grid holder.
  3. Try setting a specific number or percentage to your Div that wrap the information in each single column/row. (Even if number turns out to be smaller than what you wanted it to be, but at least you would pinpoint what the issue could be).

Anyway, just thinking out loud, cos I did not spot anything “wrong” with your project setup.
If all else fails, I suggest you simply delete the empty column, and adjust the padding and/or margins and push the grid to the right.

@Mr_Finn Yeah I’ve been using this grid for some time now and it has been working fine. Only recently I’ve started updating it with a few new elements and I’m wondering if something I’ve added lead to this weird layout problem.

The problem persists across both Chrome and Safari so I don’t think it’s a browser issue. I also disabled the browser cache in the developer tools per suggestion to the initial email I got from Webflow when I reported the bug (that didn’t help either).

I also tried all your suggestions. I was able to manipulate the width of some of the divs, but even at that, the divs are still scattered all over the place. I even created a new grid and copied the elements onto the columns they should be in. But the problem still persists :sob:

HI @erika.marquez

Jörn here from the customer support team. I answered your ticket you’ve sent to the support.

My suggestion instead of finding exactly what divs and settings causing this I would build it up again try to use as few divs as possible. As I suggested in the answer using the column component instead might be a better solution as this is just a simple two-column layout.

You could use the grid component as well but then have only one row with two columns. Then put content on the cells.

Hope this was helpful.

/Jörn

Hello @jorn,

Yes, thank you for looking into this! Rebuilding it using columns instead seems to have fixed the layout issue once published. Not sure why the grid was acting up in the first place, but happy that this solution works :slight_smile:

Thanks again for your help!

Cheers,
Erika M.

1 Like

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