I used to have a grid with zero problems. Then I updated some things inside one of the elements inside the grid, and now I have a grid that shows perfectly fine in the designer and preview, but with huge gaps on the live site.
To be clear, I didn’t touch the grid itself: it’s set to 1rem between columns, like it always was. I updated some of the information in one of the teachers (Þóra: the second element in the grid).
I’m at a loss for why the live site is so different from the designer and preview. Any thoughts?
Thanks, @addweb, that did it! I’ll mark your reply as ‘best solution’ soon.
Once I do, I can’t post more replies, and I just have a follow-up question for my own betterment: what caused the site to appear differently in the preview vs. the live site??
Webflow’s Designer and Preview Mode simulate how your design will look but may not account for all browser-specific quirks or styles applied by the final CSS and HTML on the published site.
If the grid items (choose-teacher_item) do not have an explicitly set width (e.g., width: 100%), the browser might calculate their width inconsistently based on their content.
In this case, the browser on the live site likely applied a default width or misinterpreted the item’s size within the grid, leading to those gaps.
Grid layouts rely on consistent sizing for items. Without a fixed width, items can shrink, grow, or leave unintended space based on their content or how the browser interprets the layout.
