How to make Google Recaptcha responsive

posted in: Tips N Tricks | 1

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.

One Response

  1. Phillip Whetstine
    | Reply

    hey thanks for this, it saved me a few minutes. Only suggestion is that instead of max-height: use max-width. Reason being if someone has a long phone then it will not work. Width will focus on …. well width and then it does not matter how tall a device is. just my 2 cents.

Leave a Reply