Visual Differences Between Editor and Front End
Caching and custom CSS errors can make a page look different in Breakdance and on the front end. This includes changes not appearing, a client seeing a different design, or differences between phones and desktop computers. The views can also differ on the same device.
Clear Cached Content
Caching stores copies of files so they can load faster. It improves site performance, but an older cached page or stylesheet may hide recent design changes. Clear the relevant caches first. If you use a WordPress page-cache plugin, clear its cache through the plugin's controls.
Hosting Cache
A web application accelerator, also called a caching HTTP reverse proxy, sits between visitors and your server. It serves a cached resource when available; otherwise, it retrieves the resource from the server and caches it for later requests. Varnish on Cloudways is one example.
This cache can be too aggressive when you make frequent design changes. Look for Flush, Purge, or Purge All in your host's WordPress controls. You can also temporarily disable this cache through your hosting control panel while actively developing the site. Turn it back on once the site is live and changes are less frequent.
If your host also uses a server cache or OPcache that you cannot clear yourself, ask the host to clear it.
CDN Cache
A CDN, such as Cloudflare, caches resources across geographically distributed servers to deliver content faster to nearby visitors. It is less commonly responsible for editor/front-end differences than a hosting accelerator, but it can still serve an older version of a page or file.
If your provider has WordPress controls, use them to flush, purge, or clear the CDN cache. Otherwise, ask your CDN provider how to clear it.
Browser Cache
Browsers store downloaded resources on the visitor's device and reuse them on later visits. This is a common cause of differences between the editor and front end.
Follow the cache-clearing instructions for Chrome, Firefox, Safari, or Edge.
If clearing the caches does not resolve the difference, check your custom CSS.
Check Custom CSS
Missing braces and incorrectly nested selectors can break custom CSS. A malformed rule can also affect styles that follow it in the stylesheet. Use a CSS formatter and visually inspect the code to find these errors.
Element CSS
- Select the element in Breakdance. From the Settings tab, open Advanced to find its custom CSS.
- Check for missing braces and incorrectly nested selectors. If styling works up to a particular element and breaks afterward, start with the last working element.
- Correct the CSS, save, and check the front end. If that was the only error, the styles should now display correctly.
Global Stylesheets
If element-level CSS does not explain the problem, open the top bar menu and go to Global Settings > Code. Check your custom stylesheets with the CSS formatter and a visual review, then correct any malformed rules and save.
Send the Details to Support
Use the support checklist. For this issue, show both the editor and front-end views in your screenshots or recording, and confirm that you checked element-level CSS and global stylesheets for errors.
Provide temporary support access so the team can inspect the site.