How to make Google Recaptcha responsive
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.
Comments (0)