Recaptcha – Add Option to Move Recaptcha Badge to Left or Right

I have hidden this tedious badge with css:

.grecaptcha-badge {
display: none !important;
visibility: hidden !important;
}

Added to the CSS the above code, but it did not work. The icon continues to appear on all pages.

I added it in a child theme style.css file and it works…

I can confirm that this works:

.grecaptcha-badge {
	visibility: collapse !important;  
	display:none !important;
}

However, it would be nice to have the option of moving it to the left side. You can put “left: 0px” in the CSS, but it appears in full (expanded)…

I would also love to see this option added as a feature. The CSS works, but it goes against Google’s policies.

The badge on the left would be especially helpful since most sites have a “back to top”, a menu option, or chat box which overcrowds the bottom right part of the page.

Please add a left side option for ReCaptcha.

Yes please give us the option. It’s colliding with my website’s chat box in the bottom right corner.

.grecaptcha-badge {
  left: 0 !important;
  bottom: 0 !important;
}

@olsonsp4c
Thanks Scott! But again not fully done ??
Now the badge doesn’t “fold” to the left but it “stays opened” all the time,
it takes too much space, especialy in mobile view…

This would be the complete solution (not done by me!):

.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}

.grecaptcha-badge:hover {
width: 256px !important;
}

@greg007 I had to log in to say thank you! Your reply answers the original question and it works well.

@greg007. Thank you very very much.

• This reply was modified 4 years, 8 months ago by Rey Sumayo.
• This reply was modified 4 years, 8 months ago by Rey Sumayo.
• This reply was modified 4 years, 8 months ago by Rey Sumayo.

Nice @greg007 !
Works like a charm.

I’m just adjusting the left and bottom values on sites that have a Facebook Messenger Box to align a bit better at the bottom.

.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}

.grecaptcha-badge:hover {
width: 256px !important;
}

Great solution !

??

• This reply was modified 4 years, 8 months ago by Clark Communications.

.grecaptcha-badge {
transform: scale(0.7);
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: 4px !important;
}

.grecaptcha-badge:hover {
width: 256px !important;
}

transform: scale(0.7); Added this to reduce the size of the box as well which is better for mobile any chance anyone know how to make the css responsive

Great solution – thank you!

Hi there,
I did manage to hide the badge on desktop with

.grecaptcha-badge { visibility: hidden !important; }

but it will still show up on mobile where it is the most annoying.
Can someone tell me how to get rid of it there, too, with some more CSS?