[Support request] Element container losing styling

[Dan]

Hi. I have a banner that I show at the top of my site using GP Elements. I change out these banners (colors, text, link) occasionally as promotions are swapped out. Sometimes after I save the Element, the banner shows up unstyled. Right now, it’s styled on desktop and showing unstyled on mobile, but it has happened in the past on both device types.

My cache is setup as WP Rocket >> Kinsta Cache >> Cloudflare.

However, I have two reasons to believe that the issue is not related to caching:
1. I have manually purged the cache at every level.
2. At some other time, I feel like I fixed the issue by recreating the banner from scratch, which tells me something like an old class name may be improperly saved off in GP or GB and associated with the banner container.

One of my employees is confirming that she is seeing the same unstyled banner on mobile too.

Any ideas?

Thanks for your time.

[Fernando]

Hi Dan,

Looking at your website, even on Desktop, the banner seems to be unstyled: https://share.getcloudapp.com/Z4uAzonP

Trying to access your website with WP Rocket turned off through adding ?nowprocket to the URL, I can see that the issue goes away: https://share.getcloudapp.com/v1uOybPD

With that said, we can confirm that a specific setting you have in WP Rocket is causing this.

Some settings that may cause these types of issues are Removing unused CSS, Merging CSS/JS files and Lazy loading.

You can probably test this out by temporarily disabling WP Rocket as well when viewing your website.

Hope this clarifies!

[Dan]

Hi Fernando –

Thanks for the response. Using ?nowprocket does indeed fix the issue. It’s odd because purging the cache doesn’t actually fix the issue.

Of the settings you listed, the following were NOT turned on:
– Removing unused CSS
– Combine CSS
– Combine JS

However, the following was turned on:
– Load JS deferred
– Delay JS execution

Although, I don’t see how anything related to JS is related to the styling of the banner. Can you confirm? Do you know of any other settings that could be causing this issue? Nothing else is jumping out at me.

Thanks for your time.

[Fernando]

I don’t see how JS could affect the banner as well, however, did disabling those fix the issue?

I can see that the banner in your site has the proper CSS now.

Perhaps you can reach out to WP Rocket as to why the CSS in your banner were getting stripped.

Also, I can see that you have server side caching: https://share.getcloudapp.com/Wnu7E8ek

I’m thinking if caching/optimization plugin settings are among the things cached by a server but I’m not sure.

[Dan]

The server-side caching is probably Kinsta, but that’s cleared automatically when WP Rocket is cleared. And in this case, I had manually cleared it too, along with CloudFlare.

I reached out to WP Rocket a while ago about this very issue and we did not arrive at a resolution, unfortunately. But I’ll reach out to them again. It certainly does seem like a caching issue in one respect, but then not a caching issue in another respect.

In any case, thank you for taking the time to think about this. If any other thoughts come to mind, please let me know. Otherwise, have a great day!

[Fernando]

You’re welcome Dan! I will, and hope you have a great day as well!

[Author]

Posts