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 a HUGE issue. I have tried everything such as:

HTML

<div id="captchadisplay">
  <div class="g-recaptcha" data-sitekey="???"></div>
</div>

CSS

#captchadisplay {
  width: 50% !important;
}

and

CSS

.g-recaptcha {
  width: 50%;
}

Yet I can not seem to shrink it down for my mobile website. Any ideas? :)

Solution 1

By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.

By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:

<div class="g-recaptcha"
     data-theme="light"
     data-sitekey="XXXXXXXXXXXXX"
     style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>

More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

Solution 2

I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.

With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.

The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.

It is not the best looking widget, but it fits with less work than the other solutions.

For more attributes, check Google's reCAPTCHA v2.0 documentation

Solution 3

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.

Solution 4

According to the documentation from Google shows a data-size attribute which can be set and this worked for me.

 <div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>

But, the answer from @GeekGoddess provides a little more flexibility in sizing.

Solution 5

For me the compact mode implementation of Google re-captcha 2.0 is just lame. It looks ugly.

Just expanding from "Geek Goddess" solution.

You can do the following:

<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>

That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransform is for IE <= 8).

Furthermore we can make it responsive by combining this transform scale with CSS max-width.

It's not the perfect way, but until we get the proper responsive fix from Google.

View more solutions