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

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/

Answer 2

<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..

Answer 3

Hope you find this useful

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

}

Answer 4

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

Answer 5

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"

Answer 6

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>