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

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:

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:

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?


Here is my site Read-Only:

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!