Breaks website styling when using Spectra blocks

Apologies for any inconvenience you may be experiencing. Our support team has promptly escalated your case to the Breeze team. They are currently investigating the matter and will reach out to you with updates shortly.

As per providing information regarding a 404 error encountered in the CSS file located in the UAG folder within the styles of the Spectra plugin. The error is observed when the user utilizes patterns directly from their Starter Template Plugin.

Upon receiving the concern, our team diligently attempted to replicate the issue by following the steps provided. However, despite our efforts, we were unable to reproduce the error.

For clarity and transparency, I have outlined the steps we followed for replication:

1. Installation of the following plugins and theme:
   • Spectra and Starter Templates plugins
   • Astra Theme (activated)
2. Building a new template with the Starter Templates plugin, while ensuring that Breeze is enabled with its caching and minification options.

Following the completion of the template launch, we meticulously monitored for any console errors and CSS file breaks. However, our efforts did not yield any such errors or breaks.

Furthermore, to assist you better in understanding our process, I have recorded a video capturing the entire procedure. You can access the video through the attached link for further insight.
https://phpstack-458710-2069236.cloudwaysapps.com/SC/Starter-Template.mp4

Should there be any additional steps or details we may have overlooked, kindly provide them to us. We are committed to resolving this issue promptly and ensuring the seamless functionality of our plugins.

Thank you for your attention to this matter. We look forward to your response.

I think i have the same problem, my website keeps also getting mixed up.

But it’s only in private browser?

I have the same issue as well, but it appears to be for mobile view. The content layout gets screwed up and icons from Spectra blocks get ridiculously large.

See screenshot: https://app.screencast.com/unqXSirfdXffo

Whenever I notice this issue, I have to regenerate assets via Spectra plugin settings, then purge cache via Breeze plugin. This seems to temporarily fix the issue, but it will reoccur after some time.

• This reply was modified 1 month, 3 weeks ago by Jesse B.

For cloudways users having this CSS styling issue when using Spectra, I have figured out how to fix the issue.

The core issue: I don’t know why, but Breeze or something else keeps deleting the generated Spectra CSS stylesheet files periodically. Then when Varnish serves the page from the cache, the stylesheet 404s because the stylesheet doesn’t exist anymore, and it doesn’t get auto generated when it was served by the Varnish cache. If the Varnish cache is purged and the page causes a cache miss, then wordpress regenerates the stylesheet assets and it’s fine, but when it is a cache hit and the stylesheet doesn’t exist, the Spectra block styles on the page are all broken.

To fix this, we need to revert the way that Spectra generates the css back to pre-v2.1.1: Before v2.1.1, the stylesheet was inlined into the HTML file, post v2.1.1 the default is to create separate CSS files. When the styles are inlined with the HTML, then the Varnish cache can correctly serve the page with styles every time. There is an option to disable the separate css files (File Generation) in the Spectra settings. https://wpspectra.com/announcements/clean-html-quick-loading-time-with-spectra/

I have moved my websites back to default Varnish + Breeze configuration with that Spectra File Generation setting disabled for the past few months and I have not observed this issue again.

• This reply was modified 1 month, 3 weeks ago by yiek8888.
• This reply was modified 1 month, 3 weeks ago by yiek8888.

@yiek8888 Thanks for the update. Can the issue be resolved by simply disabling ‘file generation’ Spectra setting (setting screenshot)? Any other setting to change?

Prior to resolving the issue, were you experiencing this issue for both desktop and mobile?

@jesseislil Yes just disable separate css file generation and that was enough to fix the issue. You want to inline the CSS into the HTML files so that Breeze can not delete the generated CSS, and so that Varnish caching works to provide CSS styles for the whole page without any additional stylesheet files that could cache miss.

I was experiencing the issue more often on mobile but also was able to reproduce it on desktop whenever I disabled the browser cache or used an incognito window.

Thanks. You’re right, desktop version reproduces issue in incognito window. I didn’t even realize it was happening on desktop too. Just disabled file regeneration.

To the OP and everyone – THANKS. This issue had been driving me nuts for some time. I did a complete company website redesign only to have it break every two days. I realized it must be the Spectra / Breeze combo but didn’t get anywhere with CW. The only delta was I switched from Spectra on these 2 sites from Elementor (too heavy these days and too many security warnings). Let’s hope this holds. ??