Global CSS Home Issue

I have Google reCAPTCHA v3’s badge hidden the way Google recommends via

.grecaptcha-badge { visibility: hidden; }

but it is still visible on the homepage only. This was not true a week prior so I’m not sure what happened. The code worked just fine.

When I view the webpage and add the rule via web console, it hides properly. It appears the Global CSS rule I added in Global CSS isnt even being applied to the site. I don’t see the rule anywhere in the source code.

One note: it seems like other code in the global css is applying. It seems like only the recaptcha code is not - and only on the homepage. It is hidden on all other pages.

Hi Kevin,

Thanks for reaching out.
I have checked your website and found the issue in the Home Page only as you have described it. The CSS code is on the page, but still, it does not work and might be due to the CAPTCHA loaded after the document completes its loading. I have checked other pages too and found that the Recaptcha is hidden, if you are not willing to use the Recaptcha on any page, I would suggest you remove the addon from Contact Form 7 to get rid of this issue.
If you still want to use this addon, I would suggest you contact the Plugin Author on this and let us know the feedback on this addon. Please remember that Contact Form 7 is a supported plugin, but it doesn’t mean that it is compatible with all the addons. They are not tested with our themes.

Thanks

@tristup thanks, I will message cf7 today and update this thread with his response. It is cf7’s own integration so hopefully there is a quick resolution.

@tristup Is this possibly related to deferred loading of js? I have not modified the loading of css.

Hi Kevin,

There might be the deferred loading is the cause behind your issue, the Plugin Author can confirm that.

Thanks

I will test and let you know the outcome with all caching and deferring disabled.

Cf7 ticket: https://wordpress.org/support/topic/recaptcha-not-hiding-in-homepage/

@tristup this has been fixed.

the issue was with the homepage itself not loading added css. $el css was not loading, and the recaptcha css was not loading. I have created a duplicate homepage, set it as the wp front page and now everything works.

Hello Kevin,

It is good to know that it is now working. If you need other assistance, please do not hesitate to create another thread.

Cheers.

@ruenel is this a common bug - where a single page’s css becomes bugged and the page must be deleted?

What other fix options exist besides delete and recreate? Have users reported that duplicating the page (to save time) reproduces the same bug?

Hey Kevin,

This is the first time we have encountered the issue. It could only be unique to your installation which means that a 3rd party plugin may have contributed to the issue. We will try to replicate the issue in my local testing to investigate more. In the meantime, having to delete and recreate is the option at the moment.

Thank you for your understanding.

@ruenel ok thanks. It wasn’t until I realized the $el css wasn’t being applied either that I realized the whole page was corrupted.

Hasn’t happened before so I don’t think it is going to be a regular problem

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.