How to make Google Recaptcha responsive

posted in: Tips N Tricks | 0

I have come across this problem several times while building responsive websites, where the Google Recaptcha overflows it’s container which doesn’t look great, so after some searching i have found a solution online with thanks to the Geek Goddess

First off make sure the following class is present on your Google Recaptcha div:

g-recaptcha

Then in your style sheet add the following style:

@media screen and (max-height: 575px){
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}

That’s it… easy as that!

I have tested this with Contact Form 7 on WordPress and it worked perfectly, but it should work across the board.

Leave a Reply