Frappe Builder not publishing website as shown in editor

[Rao]

I’m currently working on a website for one of my client, Frappe Builder is working fabulously!
Although, After publishing the website, its not publishing as shown in the editor. Couldn’t attach video of what I was explaining but attaching some screenshots.

• Theres a weird margin/padding across the page.

^ Published Website

^ Frappe Builder

^ Published Website

^ Frappe Builder

[Yeifer]

The discrepancy occurs on sites with https enabled, this happens because frappe adds resources with https by default. In the builder app, there is a css reset that is already included in the html, but in this case the browser blocks it because it cannot be accessed securely with https. The reset file in can be found at http://[your-site]/assets/builder/reset.css.
For more information on how to fix it, please review this answer where you will find more details:

Frappe Builder - mixed content can’t use https (reverse proxy)

@Yeifer

Hi, today I came across the same problem, to fix, you can run the following command:

bench --site [site-name] set-config host_name https://site-name-example.com

This updates the site_config.json file located at frappe-bench/sites/[site-name]/site_config.json, adding the host_name key with the correct HTTPS URL.

After making this change, ensure the updates take effect by running:

bench --site [site-name] clear-cache

Or restart bench

For more information about site_config.json and its usage, check the official documentation here:
https://frappeframework.com/docs/user/en/basics/site_config

Hope this helps!