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? :)

Try <div class="g-recaptcha" data-size="compact" data-sitekey="XXXX"></div> — refugene, Jul 9, 2015 at 12:21

Pang · Accepted Answer · 2019-06-28 09:01:12Z

50

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/

edited Jun 28, 2019 at 9:01

Pang

9,746146 gold badges82 silver badges123 bronze badges

answered Mar 8, 2015 at 22:48

Geek Goddess

6194 silver badges3 bronze badges

This doesn't work for all browsers, I would suggest using a lesselements mixin though to cover all browser variations of scale... .scale(0.77) works for all browsers with origin transform.
– SliverNinja - MSFT
Jan 28, 2016 at 1:33
10

why 0.77 and not anything else? is .77 somehow calculated to be best size here?
– Sourabh
Jul 27, 2016 at 12:59
Your site ranks higher than this on Google.👍👍
– dewd
Aug 19, 2020 at 12:40

Add a comment |

Pang · Accepted Answer · 2019-06-28 08:23:31Z

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.

new compact reCAPTCHA v2.0

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

Ozymandias · Accepted Answer · 2015-06-01 17:06:40Z

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.

L_7337 · Accepted Answer · 2015-10-28 16:55:33Z

6

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.

answered Oct 28, 2015 at 16:55

L_7337

2,70729 silver badges43 bronze badges

Add a comment |

danronmoon · Accepted Answer · 2022-02-05 17:35:30Z

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.

icetique · Accepted Answer · 2016-10-20 15:56:59Z

If you don't like the CSS solution, you may try the JS.

The idea is to dynamically switch between compact and normal mode of the recaptcha plugin.

I will provide an example with jQuery onboard, but it shouldn't be much to port it to pure JS.

I assume you have following HTML code on the site.

<div>
    <div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>

Firstly you need to load gRecaptcha 2 explicitly and provide onload callback:

<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&#038;onload=recaptchaCallback&#038;render=explicit'>

Next, create your callback function which will also be your javascript media query.

function recaptchaCallback()
{
    var mq = window.matchMedia("(max-width: 400px)");
    mq.addListener(recaptchaRenderer);
    recaptchaRenderer(mq);
}

The last thing is to render the recaptcha widget.

function recaptchaRenderer(mq)
{
    var recaptcha = $('.g-recaptcha').eq(0);
    var data = recaptcha.data();
    var parent = recaptcha.parent();

    recaptcha.empty().remove();

    var recaptchaClone = recaptcha.clone();
    parent.append(recaptchaClone);
    recaptchaClone.data(data);

    var options = {
        'sitekey': data['sitekey'],
        'size': 'compact'
    };
    if(!mq.matches)
    {
        options['size'] = 'normal';
    }
    grecaptcha.render(recaptchaClone.get(0), options);
}

You may wonder why I empty the div and clone all the g-recaptcha content. It's because gRecaptcha 2 wouldn't let you render second time to the same element. There could be a better way, but it's all I found for now.

Sumit Nayak · Accepted Answer · 2015-05-13 06:50:14Z

2

Hope this works for you.

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

Just add style="transform:scale(0.77);transform-origin:0 0"

answered May 13, 2015 at 6:50

Sumit Nayak

3173 silver badges14 bronze badges

please support your answer explaining why this will work compared to what is already solutioned.
– Sunil Kumar
May 13, 2015 at 7:10
It can fit on any screen size and even tough your solution works its an alternative to it. Please will use which they feel convenient as per their need
– Sumit Nayak
May 13, 2015 at 9:59

Add a comment |

Community · Accepted Answer · 2017-05-23 12:18:36Z

For who might be interested, I changed a little AjaxLeung solution and came up with this:

 function resizeReCaptcha() {
    if ($(".g-recaptcha").length) {
        var recaptcha = $(".g-recaptcha");
        recaptcha.parent().addClass('col-xs-12 padding0');
        var innerWidth = recaptcha.parent().innerWidth();
        if (innerWidth < 304) {
            var newScaleFactor = innerWidth / 304;
            recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
            recaptcha.css('transform-origin', '0 0');
            recaptcha.css('-webkit-transform-origin', '0 0');
        } else {
            recaptcha.css('transform', 'scale(1)');
            recaptcha.css('-webkit-transform', 'scale(1)');
            recaptcha.css('transform-origin', '0 0');
            recaptcha.css('-webkit-transform-origin', '0 0');
        }
    }
}

$(window).resize(function() {
    resizeReCaptcha();
});

$(document).ready(function () {
    resizeReCaptcha();
});

kcvetkov · Accepted Answer · 2018-07-18 15:54:31Z

Here's my spin on the resize:

<script>
function resizeReCaptcha() {

  var width = $( ".g-recaptcha" ).parent().width();

  if (width < 302) {
      var scale = width / 302;
  } else {
      var scale = 1;
  }

  $( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
  $( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
  $( ".g-recaptcha" ).css('transform-origin', '0 0');
  $( ".g-recaptcha" ).css('-webkit-transform-origin', '0 0');
};

$( document ).ready(function() {

    $( window ).on('resize', function() {
        resizeReCaptcha();
    });

    resizeReCaptcha();

});
</script>

Amy Brown Cole · Accepted Answer · 2015-02-26 21:57:31Z

1

Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden; to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.

Example:

.g-recaptcha {
max-width: 300px;
overflow: hidden;
}

answered Feb 26, 2015 at 21:57

Amy Brown Cole

112 bronze badges

Add a comment |

Dave · Accepted Answer · 2017-01-13 23:26:14Z

1

On my site the re-captcha was getting cut off and looked bad.

After some experimentation I was able to fix the cutoff issue with this style update:

<style>
  .g-recaptcha>div>div>iframe {
     width: 380px;
     height: 98px;
  }
</style>

edited Jan 13, 2017 at 23:26

answered Jan 13, 2017 at 23:15

Dave

3592 silver badges5 bronze badges

Add a comment |

Avi E. Koenig · Accepted Answer · 2017-07-10 15:22:44Z

1

Hope you find this useful

@media only screen and (max-width : 480px) {
    .smallcaptcha{
        transform:scale(0.75);
        transform-origin:50% 50%;
    }

}

answered Jul 10, 2017 at 15:22

Avi E. Koenig

3695 silver badges13 bronze badges

Add a comment |

Eric Aya · Accepted Answer · 2018-05-25 13:22:47Z

0

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

This working for me, you try it..

edited May 25, 2018 at 13:22

Eric Aya

69.7k36 gold badges187 silver badges256 bronze badges

answered May 25, 2018 at 13:20

jakasaniya mohit

11 bronze badge

Add a comment |

Fahimeh Ahmadi · Accepted Answer · 2020-05-11 05:11:42Z

0

<div class="g-recaptcha" data-theme="dark"></div>

answered May 11, 2020 at 5:11

Fahimeh Ahmadi

9299 silver badges14 bronze badges

4

Can you explain how a) how this addresses the question, and b) how it improves upon the previous answers from five years ago? On initial glance, it doesn’t seem to answer the question. But perhaps I’m missing something you could clarify?
– Jeremy Caney
May 11, 2020 at 5:21

Add a comment |

Collectives™ on Stack Overflow

No CAPTCHA reCAPTCHA Resizing

14 Answers 14

Your Answer

Not the answer you're looking for? Browse other questions tagged
html
css
recaptcha
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged htmlcssrecaptcha or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
css
recaptcha
or ask your own question.