Make the Google noCAPTCHA reCAPTCHA Fit in Sidebars

Article Last Updated: October 23, 2015

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

Before

before Google noCAPTCHA reCAPTCHA Fit in Sidebars

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:

After

after Google noCAPTCHA reCAPTCHA Fit in Sidebars