Themeisle Docs

Appearance

Site Styling Breaks After Editor Actions (HTTP/HTTPS Mismatch) ​

If your site's layout appears scrambled or stylesheets stop loading after performing editor actions — such as duplicating sections, making layout edits, or adjusting mobile settings — the cause is often a mismatch between how WordPress stores your site URLs and how your server actually serves the site.

This article explains how to identify and fix an HTTP/HTTPS protocol mismatch in WordPress General Settings, which is one of the most common reasons for this type of styling break.

Symptoms of the Issue ​

You may be experiencing this problem if:

  • Your site's styling looks broken or scrambled after duplicating a section or saving changes in the editor.
  • Clearing the cache does not resolve the issue.
  • The styling appears correctly in the editor preview but breaks on the front end, or vice versa.
  • Your browser's developer tools show stylesheet or asset requests being blocked or failing to load.

📝 Note: This issue is not limited to one specific theme. It can affect any WordPress site where the WordPress Address (URL) and Site Address (URL) settings do not match the protocol your server uses.

Verify the Site Protocol ​

Before making any changes, confirm whether your site is actually running over HTTPS:

  1. Open your site in a browser and look at the address bar — if there is a padlock icon and the URL starts with https://, your site is using HTTPS.
  2. Go to WordPress Admin > Settings > General.
  3. Check the values of WordPress Address (URL) and Site Address (URL).

If both URLs start with http:// but your site loads over https://, there is a protocol mismatch that can prevent stylesheets and other assets from loading correctly.

Fix the WordPress URLs ​

To resolve the mismatch, update both URL fields to use HTTPS:

  1. Go to WordPress Admin > Settings > General.
  2. In the WordPress Address (URL) field, change http:// to https:// (keep the rest of the URL unchanged).
  3. In the Site Address (URL) field, change http:// to https:// (keep the rest of the URL unchanged).
  4. Click Save Changes.

Your site may briefly redirect after saving. Once it reloads, the URLs will be updated.

⚠️ Important: If the URL fields are greyed out and cannot be edited, the URLs are hardcoded in the wp-config.php file. In that case, you can add or update the following lines in wp-config.php, just above the line that reads That's all, stop editing! Happy publishing:

php
define( 'WP_HOME', 'https://yourwebsite.com' );
define( 'WP_SITEURL', 'https://yourwebsite.com' );

Replace yourwebsite.com with your actual domain. If you are not comfortable editing wp-config.php directly, contact your hosting provider for assistance.

Test and Verify ​

After saving the updated URLs:

  1. Clear your site's cache if you are using a caching plugin (for example, go to Settings > WP Super Cache or your caching plugin's dashboard and clear all cached files).
  2. Open your site in a browser and verify the layout looks correct.
  3. Return to the editor and repeat the action that previously caused the styling break — for example, duplicate a section or save a change — then check the front end again to confirm styles load correctly.

If the issue persists after completing these steps, temporarily deactivate your caching plugin and test again to rule out a stale cache.

💡 Tip: If your hosting provider or .htaccess file forces HTTPS redirects, make sure these WordPress URL settings also use HTTPS to avoid conflicts. Both settings should always match the protocol your server enforces.