Hi everyone, I’m running into a formatting issue with Builder.io. Inside the editor everything looks correct and aligned, but when I load the live site in a browser there’s a huge white gap on the side of the page. It wont let me make it responsive because it does the same thing. I had my homepage completely done. I tried to make it responsive and move a button and it messed the whole formatting up.
-
In Builder.io editor: layout appears fine, no extra spacing
-
On live domain: large white space shows up on the right side
-
I’ve checked margins/padding in the editor and they look correct
-
Only I’m visiting the site, so it’s not traffic-related
Has anyone experienced this before? Could it be related to responsive settings, container widths, or a hidden element overflowing? Any tips on how to debug this so the page renders consistently in the browser would be really appreciated. I have tried to edit these things, us the AI feature nothing works. I tried to create contact us and it was the same. I ended up duplicating the retreat page and putting my content into templates and adding it in there and it worked. However it made me keep a three column image layout at the bottom of page otherwise it breaks format and does the same thing. Not sure why this is suddenly happening? Really frustrating that the preview is not the same as actual viewing online, the QR code just loaded up a responsive looking site but if i look on my phone when I type the website in it is over to the right completely and there is white space - looks totally different. I have reverted back to a previous version now to fix it but I can’t update my site now without it breaking it… .please any advice or help.
Thanks in advance!
Builder content link
Builder public api key
065b75e8053a4a039743d2b93d607518
What are you trying to accomplish
I want my page to load in the browser and be aligned in the centre with no scroll bar. Currently if i make a new page and try it aligns all my content to the left hand side with a gap on right white space, but also cuts off some of the work on the left (e.g. part of nav bar & hero image and rest of content).
Code stack you are integrating Builder with
Using github & react and cloudlfare