Move The Google reCAPTCHA v3 Badge Higher Up (To Prevent Overlapping)

2021-09-29 | Divi Forms, Tutorials, WordPress | 0 comments

Is it tight in the bottom right corner? Let's move the badge up, up, up!
Skribent: Victor Duse
By Victor Duse

Is the Google reCAPTCHA v3 badge overlapping the cookie bar or the back to top button in the bottom of your WordPress website? Here’s is how you nudge up the badge to make more room.

Before

The Google reCAPTCHA v3 badge covers back to top icon

It’s a common issue that the reCAPTCHA badge is covering content in the bottom right corner, for example back to top buttons, cookie bars and chat widgets.

After

Move up the Google reCAPTCHA v3 badge

By moving the reCAPTCHA badge up a few pixels, other content in the bottom right corner will be visible instead of being hidden behind the badge.

By default, the Google reCAPTCHA v3 badge position is in the bottom right corner just 14 pixels above the bottom. In some cases, this makes the badge cover elements like back to top icons, cookie consent banners and other widgets. One way to solve this is to move the badge higher up on the page.

Move up the reCAPTCHA badge, step by step

  1. Log in to your WordPress dashboard
  2. Go to Appearance » Customize
  3. Click Additional CSS and paste the snippet below:
    /* Move reCAPTCHA v3 badge up */ 
    
    .grecaptcha-badge {
    bottom: 90px !important;
    }
  4. Save and preview in frontend.
  5. If needed, change the value 90px to find the right position for your web design.
  6. Clear your browser cache and website cache if the badge isn’t moved higher up.

Alternative methods to prevent overlapping

Instead of moving the badge higher up, you could also hide the badge (yes, that’s allowed) or move the badge to the left side. Check out the tutorials below to get started.

Good luck!

That’s all!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related post: How to add Google reCAPTCHA v3 to a Divi Contact Form

Related post: How to design a stunning Contact page with Divi

Related posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.