If you identify the CORS errors in the console window, the solution is straightforward and you can simply replace the “HTTP” protocol with “HTTPS” in the “WordPress Address” and “Site Address” URL.
Why this happens?
Despite the successful demo import, we sometimes encounter site-breaking issues on the front end. A protocol difference frequently causes a CORS (Cross-Origin Resource Sharing) error.
If you open the console window (by pressing F12 and clicking on the Console tab), you can identify CORS errors on your site. The CORS error may prevent styles from loading on your site properly because of the different network protocol. Therefore, we should address this for the fix of your different site layout issue.
If you don’t know about the CORS error and want more details, you can consult this article.
All You Need To Know About CORS Errors
How to fix it?
If you navigate to
Dashboard > Settings > General
page, you will be possible to see “WordPress Address (URL)” and “Site Address (URL)“.
After making this change and saving it, the system will automatically log you out. This behavior is expected and you don’t need to worry about it.
Once you log back in, be sure to clear your browser cache before checking the site again. By updating the protocol from “HTTP” to “HTTPS” URL, you can resolve the CORS issues and ensure that the necessary resources, such as styles, load properly on your site.
Remember to clear the browser cache after the protocol change, as cached resources may still use the old protocol and cause the CORS errors to persist. After implementing this fix, monitor the site closely and verify that the CORS-related issues have resolved. If you continue to encounter problems, double-check the console for any remaining CORS errors and make further adjustments as needed.