ReCaptcha is not really responsive.

[Chris2011]

As I have the problem now, the recaptcha has a fixed size and should be responsive. Here is a bug ticket from februrary: https://code.google.com/p/recaptcha/issues/detail?id=215

[wouterds]

It's too bad it isn't responsive indeed. The only decent workaround I have found so far is scaling the whole thing down a bit with css transform.

[rowan-m]

You can also try specifying the data-size="compact" attribute. Though, this does only affect the initial display of the widget, not the potential additional UI if further verification is needed.

[qcam]

The image select box is now broken with an annoying text area 😞, hoping someone can submit a fix.

[rowan-m]

@huynhquancam do you have a screenshot or a way to reproduce?

[qcam]

@rowan-m thanks, here is the screenshot from my localhost

and also the HTML generated

<div class="form-group">
  <script src="//www.google.com/recaptcha/api.js" async="" defer=""></script>
  <div class="g-recaptcha" data-sitekey="XXX">
    <div>
      <div style="width: 302px; height: 422px; position: relative;">
        <div style="width: 302px; height: 422px; position: absolute;">
          <iframe src="https://www.google.com/recaptcha/api/fallback?k=XXX&amp;hl=en&amp;v=r20150812220525&amp;t=1&amp;ff=true" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
        </div>
      </div>
      <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;">
        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; "></textarea>
      </div>
    </div>
  </div>
  <noscript>&lt;div style="width: 302px; height: 352px;"&gt;  &lt;div style="width: 302px; height: 352px; position: relative;"&gt;    &lt;div style="width: 302px; height: 352px; position: absolute;"&gt;      &lt;iframe src="//www.google.com/recaptcha/api/fallback?k=XXX"                frameborder="0" scrolling="no"                style="width: 302px; height:352px; border-style: none;"&gt;        &lt;/iframe&gt;      &lt;/div&gt;      &lt;div style="width: 250px; height: 80px; position: absolute; border-style: none;              bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;"&gt;        &lt;textarea id="g-recaptcha-response" name="g-recaptcha-response"                   class="g-recaptcha-response"                   style="width: 250px; height: 80px; border: 1px solid #c1c1c1;                   margin: 0px; padding: 0px; resize: none;" value=""&gt;         &lt;/textarea&gt;      &lt;/div&gt;    &lt;/div&gt;  &lt;/div&gt;</noscript>
</div>

[uri111]

Here is a hack that worked for me:

.gc-reset{
transform:scale(0.95) !important;
-webkit-transform:scale(0.95) !important;
transform-origin:0 0 !important;
-webkit-transform-origin:0 0 !important;
}

gc-reset is a class that is used in three wrappers around the imageselect, so the transform is applied three times.

[wouterds]

@recfish That's how I did it as well, not very beautiful but it works.

[ghost]

Why is this not being fixed? A lot of websites are responsive, and a lot of traffic goes via mobile devices. It makes no sense that recaptcha is not responsive as well.

[Chris2011]

I really agree with that but for me, as a workaround the scale thing was working for me.

[goldhand]

Hopefully scaling this will work across devices but seriously.... Why isn't this fixed yet????

[unRARed]

+1... It's sort of unbelievable that this is not responsive. And what's with the id-less, class-less div wrapping the iframe with a set width? or is that just the rails Gem doing that??

[gran33]

+1 It's really not responsive :/ , Any news?

[paladini]

For Bootstrap 3 (+ 480px breakpoint hack) the following code (written in SCSS) partially solved my problem:

// Extra small (<480px)
@media(max-width: $screen-xs-max){
  .g-recaptcha iframe {
    max-width: 100%;
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin: center center;
    -webkit-transform-origin: center center;
  }
  #rc-imageselect {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
  }
}

// Medium small (>=480px)
@media(min-width: $screen-ms-min){
  #rc-imageselect {
    transform: none;
    -webkit-transform: none;
  }

  .g-recaptcha iframe {
    max-width: none;
    transform: none;
    -webkit-transform: none;
  }
}

// Horizontally center the recaptcha - applied to all widths
.g-recaptcha > div > div{
  margin: 4px auto !important;
  text-align: center;
  width: auto !important;
  height: auto !important;
}

This code will horizontally center your recaptcha and scale it when width less than 480px. However, this code also hides part of the recaptcha when you have a device with less than ~403px wide.

There's anyone here with more css skills than I that can solve this problem?

Code based on How to resize the Google noCAPTCHA reCAPTCHA. Btw Google, please implement responsiveness support.

[wouterds]

Any plans or update if and when it would be made responsive? @rowan-m

[jayesbe]

My solution is a pure JS approach. Using jquery + bootstrap 3 (img-responsive class).. though im sure it's quite easy to pull out that little bit of css related to img-responsive.

var recaptchaCallback = function () {
    $('.g-recaptcha').each(function() {
                var rc = grecaptcha.render(this, {
          'sitekey' : ..,
          'theme': ..,
          'callback': ..
                });

               $(this).find('iframe:first')
               .removeAttr('width')
               .addClass('img-responsive')
               .parent()
               .css('width', 'auto');
        });
};

[drakanor]

On small smartphones (iPhone 3, S3 mini) it's even worse: the re-captcha container gets cut off on the right. A lot of our mobile visitors still use these kind of small smartphones. It's actually quite unbelievable that Google, the creator of so many great frameworks and fierce supporter of mobile front-ends, is not capable of or willing to do a responsive re-captcha.

[goldhand]

Just label this: won't fix

[Chris2011]

@goldhand because of? There should be a reason for doing a won't fix. All the solutions are workarounds for me.

[wouterds]

@goldhand @Chris2011: There's indeed no solution yet, it should be fixed. Right now it's little hacks and workarounds. And when the test is displayed it's completely broken. I don't understand how this bug is still open after all these months.

[goldhand]

@Chris2011 sorry for my sarcasm. It's been almost a year since this issue's been open but that's not an excuse to be negative.

[Chris2011]

@goldhand ok no problem :)

[crzyhrse]

Hoping someone at google is paying attention, adding my 2 cents it needs to be fixed, maybe more voices is good, no knowing...

[madebycambiamentico]

+1 yes. it would be awesome if the responsiveness coud be enhanced.

[MiticoMedia]

Always responsive issues with google. Had similar issues with google ads not being responsive. Adding another comment so this issue hopefully gets fixed without the need for a work around.

[MiticoMedia]

Got it working with this code.

@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; }

[crzyhrse]

Thank you so much... This code works great...

Warm regards...

[Chris2011]

Such code was still mentioned comments before. See #61 (comment) and #61 (comment)

[crzyhrse]

I suspect most here are more code savvy than I, so I hesitate a bit, but offer that this code was easy to try, goes after the height rather than width so maybe hopefully includes some different phone widths, not just my iPhone 5s, is less involved than the linked to code, and does it perfectly for me... I just needed to tweak the scale a bit for my eye...

Kind regards...

[sailingdeveloper]

I can pull request the css fix of @MiticoMedia, if that's welcome?

[TakesTheBiscuit]

bump

[abhigyantiwari]

👎

[gobi004]

http://webprow.com/blog/recaptcha-v2-responsive/

…

On Wed, Jan 31, 2018 at 4:09 PM, Abhigyan Tiwari ***@***.***> wrote: 👎 [image: capture] <https://user-images.githubusercontent.com/16822592/35618443-03b49c56-06a1-11e8-9fcf-7fc5d4d23702.PNG> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#61 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AT2fUdVXBNMOka0q_84jA157YI3Vg_66ks5tQELfgaJpZM4Fo_M9> .

-- Gobinath.B - Freelance web developer Website : Webprow <http://webprow.com/>

[hmalaud]

I think you guys don't understand how complex this development is. Changing width must involve thousands of hours of hard work and cutting edge skills. Remember adding color on a text in CSS? It's even worse.
Plus it's not like it's really important, today browsing on mobile phones is so overrated, I think people are not ready for it.

[Jimmaki]

@bmalaud are you serious?

[Chris2011]

@Jimmaki I don't think so ;)

[ParmarVjay]

Here is JavaScript code using jQuery to do so:

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 302) {
        var scale = width / 302;
        $('.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');
    }
});   

IMP Note : It will support All Devices, above and bellow 320px width as well.

[tomanistor]

@ParmarVjay Thank you - this works. In my application, I also ran it on window resize so that reCaptcha remains responsive when container width changes.

function resizeReCaptcha() {
  var width = $('.g-recaptcha').parent().width();
  if (width < 302) {
      var scale = width / 302;
      $('.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();
});

[Jimmaki]

@ParmarVjay Added your snippet just before didn't do anything.
Should I place it instead in the ?

[kirilcvetkov]

To expand on @tomanistor, I added a part to resize back to normal if the screen is wide enough (for example, flipping from portrait to landscape and vice versa).

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();
    
});

[rowan-m]

I'm updating things on the v1.2 branch. One of those things is an example of the invisible reCAPTCHA which may make your life easier as you no longer need to display the button. The challenge will only be shown when the user does not pass the automatic tests. This will also include v3 API support which doesn't show challenges at all, just returns a confidence score.

[rowan-m]

Example hosted at https://recaptcha-demo.appspot.com/recaptcha-v3-request-scores.php

[cyphix333]

...and here we are nearly the end of 2018 and this is still an issue; piss poor Google, piss poor.

[gbwashleybrown]

+1 This is still a problem. Why hasn't this been patched yet?

[Chris2011]

Example hosted at https://recaptcha-demo.appspot.com/recaptcha-v3-request-scores.php

The example is for v3 the invisible one, the ticket is about v2 where v3 didn't exist until now. So if v2 still relevant for the users, please reopen the ticket. This will not solve the initial problem of the styling. thx. @rowan-m

[iamumairayub]

3 and half years have passed and still we dont have responsive re-captcha :(

[ssuryar]

Use below mentioned code

.g-recaptcha {transform: scale(0.85); transform-origin: left top;}

[Seanmclem]

It seems like the responsiveness issues come from the fact that it's in an iframe and it can't really tell the size of it boundaries from in there. I'm surprised we can apply styles to it.

[erfantkerfan]

+1

[dsosborn]

Dear Google,

It's 2019. People have begun using their phones to access the internet. 🤯Also, V3 is not a new version, but rather a completely different approach to bot mitigation. Please fix V2.

Thank you,
Developers everywhere

[crzyhrse]

++1 I really really dislike the V3 approach, it is an utterly insane time consuming frustration when it triggers. and I refuse to expose any of my clients or their clients to the possibility of it... Whenever I trigger V3 I tend to leave the page if I can... I suspect most people do...

[mikeshutov]

If anyone stumbles upon this and still looks for a solution for V2 just something which I found worked for me. Ill update this with a fiddle when I get home to demonstrate the idea:

I had a similar issue for the recaptcha checkbox itself I ended up recreating the recaptcha box (the surrounding element). Basically you adjust the iframe to contain just the checkbox and the i am not a robot text i then recreated the whole area surrounding the recaptcha so that it can be restyled. Its a bit of a crude solution but it did solve this for me.

As for the recpatcha challenge popup you will notice that it does not fit into the device on mobile screens. What you could do (feels like a crude solution) set up an interval which will look for an element with a class 'g-recaptcha-bubble-arrow' once located add a class to its parent div which will let you style the element. Or you could directly apply your styles via js to the parent.

[bartek-szymanski]

For the recaptcha popup, if you have this kind of structure:

<div style="[...]">
    <div style="[...]">
    </div>
    <div class="g-recaptcha-bubble-arrow" style="[...]">
    </div>
    <div class="g-recaptcha-bubble-arrow" style="[...]">
    </div>
    <div style="[...]">
        <iframe title="recaptcha challenge"
            src="https://www.google.com/recaptcha/api2/[...]"
            name="[...]" frameborder="0" scrolling="no"
            sandbox="[...]"
            style="[...]">
        </iframe>
    </div>
</div>

you can use

.g-recaptcha-bubble-arrow + div:not(.g-recaptcha-bubble-arrow) {
    overflow-y: scroll;
    height: 90vh !important;
}

it will add scrollbar in the popup

[mikeshutov]

Its been some time since i looked at it but to give an example if what I meant by my comment i created this little "plugin" if you could call it that. I have to fix a few things for it but it may give someone an idea.

https://github.com/datorman/ResponsiveRecaptchaV2

Not a perfect solution but hopefully can help someone.

[natasha-tullos]

Really the issue is the style left:146px given to the div that surrounds the recaptcha - at least for me but I'm not sure if anyone else sees this as an issue. Unfortunately, I can't seem to adjust this manually at work without using query selector all and being super specific about it, but I'm willing to make a PR to fix this issue if needed.

@rowan-m

[jacklinwood]

Thanks everyone!

I used some of the advice above but was having trouble with it being centred on mobile.

See the following for my full fix:

@media screen and (max-width: 414px) {
   .g-recaptcha {
      position: relative;
      left: 50%;
      -o-transform: scale(0.8) translateX(-50%);
      -ms-transform: scale(0.8) translateX(-50%);
      -moz-transform: scale(0.8) translateX(-50%);
      -webkit-transform: scale(0.8) translateX(-50%);
      transform: scale(0.8) translateX(-50%);
      -o-transform-origin: left center;
      -ms-transform-origin: left center;
      -moz-transform-origin: left center;
      -webkit-transform-origin: left center;
      transform-origin: left center;
   }
}

[krit0627]

Test on pc, tablet, mobile.
This code it works! enjoy it.

$(document).ready(function() {
    $(window).resize(function() {
        rescaleCaptcha();
    });

    rescaleCaptcha();

    function rescaleCaptcha() {
        let scale;
        let reCAPTCHA = $(".g-recaptcha");
        let width = reCAPTCHA.parent().width();

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

        reCAPTCHA.css({
            'margin': '0 auto',
            'width': 'fit-content'
        });
        reCAPTCHA.css({
            'transform': 'scale(' + scale + ')',
            '-webkit-transform': 'scale(' + scale + ')'
        });
        reCAPTCHA.css({
            'transform-origin': 'top left',
            '-webkit-transform-origin': 'top left'
        });
    }
});