ReCaptcha is not really responsive. about recaptcha

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.

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

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

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

[ShellCode33]

Here is the best workaround I have found :

.g-recaptcha > div {
    width: 100% !important;
}

.g-recaptcha iframe {
    width: 100% !important;
}

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

[wouterds]

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

[goldhand]

Just label this: won't fix

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

[gran33]

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

[iamumairayub]

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

[abhigyantiwari]

👎

[Jimmaki]

@bmalaud are you serious?

[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

[ssuryar]

Use below mentioned code

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

[rowan-m]

Hey all, sorry for being quiet on this! A few bits for you…

Firstly, this repo is actually just the PHP code that provides a client to the reCAPTCHA service. It is not responsible for any rendering of the widget. I've gone through and labelled all the issues that are referencing something that would not be affected by changes in this repo. I will go through the widget issues though and pass these on to internal issues where appropriate.

I'll carve out some time to go through these properly and start addressing the PHP issues then get another release out. I'm also happy to add a FAQ or similar with CSS tips however I have to caveat that externally altering the appearance of the widget is fragile since it obviously it may change and any CSS applied externally may have an unintended effect.

[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');
        });
};

[nirazul]

https://www.google.com/recaptcha/intro/invisible.html

[mynttt]

This is so annoying. Please fix this, playing arround with scale and margin to fit it probably should not be needed.

[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/>

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

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

[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'
        });
    }
});

[arajay]

is this going to be addressed? it's a major problem with recaptcha and here we are 2 years later

[klombomb]

@wouterds Ironic that a company promoting progressive web apps all the time isn't bothered to make one of their most popular developer services responsive.

[gobi004]

Hi,
I've found a solution for this you can find it here. and pls comment it also for below link's post
http://webprow.com/blog/recaptcha-v2-responsive/

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

[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

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

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

[wouterds]

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

[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??

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

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

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

[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?

[unRARed]

@sailingdeveloper, my vote would be not to merge a CSS hack. Is it not possible to remove whatever code that is explicitly setting the width and height? Perhaps make it possible to pass an options hash?

[crzyhrse]

Thank you for getting back and for your intentions here... Clearly fixes for this and the other issues you have labelled need to be applied internally as you indicate... Wishing that to go well... And, a CSS FAQ would be nice to have, appreciated...

[garygreen]

@rowan-m thanks for your comment although it doesn't really answer the main question -- will recpatcha be made more responsive? It's one thing that puts me off using it at all because it's pretty much unusable on mobile at the moment.

[nirazul]

@jayesbe Your solution seemed to be the only one to be promising for a responsive website and fluid layouts, so I've created a tiny solution with jQuery for django-cms, as this has been my current need:

Maybe my Stackoverflow answer is of use to somebody.

[dieggono]

Sorry my bad english.
Is the version I use for Joomla-k2 and works perfectly for my:

.k2-recaptcha-v2{
    margin: 0 !important;
    margin-top: 15px !important;
}
.g-recaptcha > div,
.k2-recaptcha-v2 > div {
    width: 100% !important;
}

.g-recaptcha > div > div,
.k2-recaptcha-v2 > div > div {
    margin: 4px auto !important;
    /*text-align: center;*/
    width: auto !important;
    height: auto !important;
}

.g-recaptcha iframe,
.k2-recaptcha-v2 iframe {
    transform: scale(0.85);
    -webkit-transform: scale(0.85);
    transform-origin: left top;
    -webkit-transform-origin: left top;
}
#rc-imageselect {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
}

/*-- Pantallas superiores a 480px --*/
@media(min-width: 480px){
  #rc-imageselect {
    transform: none;
    -webkit-transform: none;
  }

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

[klombomb]

How has this not been fixed yet?

[wouterds]

@klombomb Last thing they told me (somewhere in the end of 2015) was that it's "out of scope" for this specific repo/project. But they were going to pass it on to the design/product team.

[wouterds]

@klombomb: The best "solution" available at this time is scaling the whole thing down using css transform: scale(0.95) !important;.

[Chris2011]

The solution was the scaling thing and it was mentioned often before @gobi004

[Chris2011]

All of these are workarounds @google-admin

[MohanadI]

I fixed the problem without any extra css ,
just set the div width:100% , also I remove iframe overflow:hidden .

[alexey-sh]

Any CSS trick doesn't work for me.

[alexey-sh]

width:300px

[kevinlau228]

My work around:
https://stackoverflow.com/questions/27691411/change-new-google-recaptcha-width

[mcshaman]

+1 to a fix

[zanderwar]

Booo fix it, there is irony in punishing indexing for lacking mobile compatible websites

@MohanadI not sure how it helped you

[TakesTheBiscuit]

bump

[Chris2011]

@Jimmaki I don't think so ;)

[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

[erfantkerfan]

+1

[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]

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