In-Designers Grids Are Breaking Layout (Looking For Help)

Design help General
1

Hi everyone,

I’m having an in-designer issue where my Grid element is not showing content correctly. It breaks when I add in the final column element.

Note: When I publish my site live, the grid displays correctly without the in-designer issues.

Basically, my grids are all aligning to the left and not using the correct amount of columns, for example the image below is showing 5 columns, but its only a 4 column grid:

image
image2455×903 117 KB

image
image3396×1390 193 KB

If I delete the last element… the grid starts working correctly. It’s only when I fill the last column it breaks. As you can see I deleted the 4th element from the same grid in the images above:

image
image2455×1041 112 KB

image
image3484×1162 167 KB

So far I’ve tried to troubleshoot by doing the following:

  • Using an incognito browser (no luck)
  • Trying a different project (no luck)
  • Removing all styles including inherited (no luck)
  • Checked for custom code (none present that I could find)

Has anyone ran into this issue and have a possible fix?

Thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/aaronward?utm_medium=preview_link&utm_source=designer&utm_content=aaronward&preview=8be0fcc18a21e7bd7014ae16ed3db75c&workflow=preview

2

Update 1: zooming in 110% on chrome browser fixed this issue surprisingly.

While this isn’t an ideal solution, it helps for now. Just wanted to give the heads up incase any staff or someone else having this issue stumbles across this post.

For reference (can provide more if required), I’m using a 4k Monitor with 175% scaling in Windows 10 Display settings.

Update 2: Changing my display size for apps to 150% also fixes the issue and resizing my chrome browser back to 100%. Hope this helps for anyone with the same problem!

image
image1777×1291 101 KB