How to make Google reCAPTCHA responsive

I have come across this problem several times while building responsive websites, where the Google Recaptcha overflows its 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.