No CAPTCHA reCAPTCHA Resizing

Question

Hi I just added Google\'s No CAPTCHA reCAPTCHA to my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is

Answer 1

I have been using some JQuery, since putting transform(0.77) in the style attribute wasn't a truly responsive solution.

I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:

@media(max-width: 390px) {
    .g-recaptcha {
        margin: 1px;
    }
}

I then add this JQuery:

$(window).resize(function() {
    var recaptcha = $(".g-recaptcha");
    if(recaptcha.css('margin') == '1px') {
        var newScaleFactor = recaptcha.parent().innerWidth() / 304;
        recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
        recaptcha.css('transform-origin', '0 0');
    }
    else {
        recaptcha.css('transform', 'scale(1)');
        recaptcha.css('transform-origin', '0 0');
    }
});

The 304 I use is the default width of the ReCaptcha box if unstyled.

Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.

Note that the media query is simply a mechanism to detect a screen size change.