Website looks different in website builder and in browser
If styles/images are not loaded:
- If you have some custom files, except for files that are published from builder in your hosting web root folder, then make sure that your files do not intersect with generated files. The intersection can be caused by equal file names in web root folder and "sitepro" folder. For example, the website may not work properly if both files exist:
[web-root]/js/main.js
and[web-root]/sitepro/js/main.js
. In this case you need to rename or move to another folder all equal files like[web-root]/js/main.js
.
The same issue can appear with folders. For example, if you have a page on website with URL "Contacts" (http://mywebsite.com/Contacts/), then the page will not work if you also have folder "Contacts" in website root folder. - If website is running on Apache server, then make sure that Apache module "mod_rewrite" is enabled for website host. Without this module, website may look completely messed up — with no images and styles loaded.
- Please open file ".htaccess" located in web root folder of your website. Delete (or comment) all the content (if any) between lines "#### PERSISTENT CONTENT ####" and "#### PERSISTENT CONTENT END ####". After that reload website in browser and check whether the problem was resolved.
If Auto Layout enabled:
Auto Layout is an option that tries to create a responsive website (adapt it to any device) from built website by using only one version as a source (Wide, Desktop, Tablet or Phone). However, Auto Layout option requires a logical and understandable website structure to be able to convert it as correctly as possible. If it does not, then the final website may look incorrectly or be different from built website in builder.
- You should avoid overlapping one element with another in builder. This structure is not supported by Auto Layout and it will put these elements on final website one next to another.
- Sometimes, the website may look properly in builder but on final website (when previewing or published) some part of website may be shifted a lot to the left or right sides. Usually this problem is related to the fact that there is some unwanted element left on the page which you do not need, but it cannot be seen because of negative offsets setup to that element. In order to find such element try zooming out builder in browser (Ctrl + "-") until you start seeing that element. Once you find that element, delete it. Revert back browser zooming and try previewing the website to see if the problem was fixed.
Other reasons:
- Make sure that you are looking at the same version in website builder website and published website — i.e., maybe you see "Desktop" version in builder and "Wide" version in published website. Try resizing browser window with published website to see how it is changed (if other modes are enabled in builder).