Make the Google noCAPTCHA reCAPTCHA Fit in Sidebars

Article Last Updated: March 4, 2021

The Google noCAPTCHA reCAPTCHA is not responsive which causes it to extend beyond the edges of your typical sidebar when used in a widget.

The captcha box itself is hosted on the Google site and they control all the styles, so how do you make Google noCAPTCHA reCAPTCHA fit in sidebars?

I found this awesome tutorial from The Geek Goddess: How to resize the Google noCAPTCHA reCAPTCHA

All you need to do is drop this code into your theme’s stylesheet:

.g-recaptcha {
     transform:scale(0.77);-webkit-transform:scale(0.77);
     transform-origin:0 0;-webkit-transform-origin:0 0;
}

And now your widget form looks like this:

Knowledge Base