How to resize the Google noCAPTCHA reCAPTCHA

Jaime Lernercoding 304 Comments

I recently released my first WordPress plugin, InfuCaptcha, which inserts the new Google “noCAPTCHA” reCAPTCHA into Infusionsoft web forms. Because of this, I’ve spent a bit of time with the new version of reCAPTCHA.

While I really like the new version, I didn’t like how it is not responsive, so it extended outside my container when viewed on mobile:

Screen Shot 2015-02-05 at 8.38.25 PM

I wanted to resize it, but it seemed no matter what I tried to target with CSS or a combination of CSS and javascript, nothing seemed to change the look of the captcha. So rather than trying to change what was generated by Google’s externally-loaded javascript and css files, I decided to change what I felt I could change – the div you place on your site with the g-recaptcha class that loads up the reCAPTCHA.

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:

Screen Shot 2015-02-05 at 9.39.41 PM

Much nicer!

Here’s what your new markup should look like if you want to get the same effect:

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

(Updated June 17, 2015: Thank you to Quyen Ha for correctly adding we still need webkit fallback for Safari iOs/iPhone! I’ve updated the code above to reflect that.)

You can adjust the scale to whatever looks best for your particular layout. The transform-origin property is added because when you use the transform property, it doesn’t change the actual space taken up by the element. So, in order to have the reCAPTCHA align to the top left, I set it so the transformation would originate from the top left-hand corner (rather than from the center, which is the default). I used “0 0”, but “left top” would have had the same effect.

That’s just a basic way to show how you can quickly change the size of the reCAPTCHA with inline styling. For something nicer, I’d suggest assigning a new class and leaving it at full size for anything above mobile, then using a media query to change it to the smaller size. Even better would be to use a transition effect so it visually “shrinks down” when you go to mobile.

To scale the images popup, you can use this code, either by inserting it as a separate style embed (like below) or simply adding it to your CSS:

<style>
#rc-imageselect {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>

Update September 8, 2015: I wanted to give props to Jon who came up with a more elegant solution that encompasses everything. Rather than changing the embed code inline, you can alternately add ONLY the following as a separate style embed (like below) or add it to your CSS (note I’m adding in the webkit styling that Jon left out when he made his comment):

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

Update July 23, 2021: Option from Frank that uses the max-width instead of height. Use whatever works best for you! :)

<style>
@media only screen and (max-width: 500px) {
.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}
}
</style>

Update October 1, 2024: Javascript option from Oleg. Nice!

function resizeCaptcha() {
var captchaElem = document.getElementsByClassName(“g-recaptcha”)[0]

var captchaWidth = captchaElem.children[0].offsetWidth;
var parentWidth = captchaElem.parentElement.offsetWidth;

captchaElem.style.transform = “scale(” + (parentWidth / captchaWidth) + “)”;
captchaElem.style.transformOrigin = “0 0”;
};

grecaptcha.ready(resizeCaptcha);

addEventListener(“resize”, (event) => {resizeCaptcha()});

If you found this useful, please let me know in the comments below.

Comments 304

  3. Thank’s for tips but not really responsive, just fix size more small on mobile and not worked on Iphone 6, safari browser. :-/

    Reply

      2. And it is still not responsive. You just assume a smaller fixed size. A responsive implementation would react on any screen resoluation dynamicly. Which means you cannot just scale it to 77%. This solution is a start but nothing recommanded or good at all.

        Reply

  15. This actually worked great to fit in, however now, it triggers the second step verification every single time. Anyone else having the same issue?

    Reply

  18. on iPhone 6 or Safari iOS we still need prefix -webkit fallback.
    I hope Apple will standardize W3C like Chrome, Firefox in future!

    -webkit-transform:scale(0.77);
    transform:scale(0.77);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;

    Reply

    1. Thank you! You are absolutely correct, and I’ve added your code to the post (with attribution, of course). :)

      Reply

    1. Haha! Thanks for the nice comment! It’s very odd to me that the recaptcha isn’t responsive. It certainly should be!

      Reply

  24. But this won’t solve the resizing problem of the pop-up window which appears when you actually have to prove you’re not a robot…

    Reply

    1. Yes, i also realized about that…
      Hope someone could help also with this: pop-up window which appears when you actually have to prove you’re not a robot…

      Reply

  25. omg, thank you for this awesome trick! it was pissing me off so much ahaha, glad your post was one of the first hits when I finally googled it :D

    Reply

  29. Great post thank you so much. You just helped over 5,000 websites make this work flawlessly on their sidebar contact forms that look just like yours :). You rock!

    Reply

  31. Thanks for putting this up, Like others I’ve gone in circles over this. I was ok when Google laid down the ‘responsive’ rule, but by keeping this so strict and not adjusting it they have created so much agony for those do that comply.

    Your trick ended a 4 hour seige today alone. Big thanks!

    Reply

  32. Thank you so much for this. I’ve been struggling with this as well, as I’ve used the Google noCAPTCHA reCAPTCHA on many websites I’ve developed, and it’s been a frustration. You really helped me a LOT. Appreciate the post.

    Reply

  36. Were you able to resize the popup challenge container where you have to select pictures? I’ve been trying to target that container without any luck.

    Reply

      1. This solution did not work for me. reCaptcha dynamically inserts a DIV into the DOM when a user clicks on the checkbox which prompts photo selection popup. The #rc-imageselect container is within an iframe loaded inside the dynamically inserted DIV and I could not target it with just the css media query.

        I ended up using a jQuery/JavaScript workaround. It works by detecting (via MutationObserver) when a DIV is inserted and targeting inserted DIV. Then if it’s a small screen (mobile devices), then scale the popup.

        This is what I used:

        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
        for (var i = 0; i < mutation.addedNodes.length; i++) {
        if (mutation.addedNodes[i].tagName == 'DIV') {

        var thediv = mutation.addedNodes[i];
        var sw = window.screen.width;

        if(sw < 667) {
        $(thediv).css({"transform" : "scale(1.9)", "transform-origin" : "0 0", "-webkit-transform" : "scale(1.9)", "-webkit-transform-origin" : "0 0"});
        }

        }
        }
        });
        });

        // pass in the target node, as well as the observer options
        observer.observe(document.body, {
        attributes: false,
        childList: true,
        characterData: false
        });

        This code was posted here: http://stackoverflow.com/questions/30598602/detect-iframe-dynamically-using-jquery

        And I modified a bit. Hopefully this can be useful to someone else.

        Reply

  37. Thanks for this!

    I would suggest stripping out the inline style, using the current class presented by google, and applying the style to both the form and the image prompt only on screens smaller than 575px height:

    @media screen and (max-height: 575px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.77);transform-origin:0;transform:scale(0.77);transform-origin:0 0; }
    }

    (with appropriate autoprefixing as needed of course!)

    J

    Reply

    1. Great info GG
      Having one small problem with the #rc-imageselect
      Can anyone give me a working example of using this in an external css file ??
      It does not seem to have any effect so far…

      Reply

  41. Thank you, excellent tips. However, applying styles to “#rc-imageselect” is not affecting (scaling down). Since that ID inside the iframe will that take the styles we are trying to set?

    Reply

    1. Hey George,

      Good point. Was mucking about with that part too. Now looking into solving that issue…

      Edit: Okay.. did some looking around. Of course not possible unless you can control the iframe src that’s being called. Which is Google’s… so no solution there. If the user puts it’s device into landscape mode upon being challended, it will work out without the scaling. You can only scale the g-recaptcha div, as that’s not inside of the iframe that’s out of our control.

      Reply

  42. I just find it ironic that Google starts pushing for “mobile” compliancy to be included in it’s Site Rankings and then somehow forgets to bother making any of it’s future products adhere to it’s own mandate where we have to add hacks to fix their lack of competency.

    Reply

  46. OK i know very little about where this stuff goes. Can I put all of this in the custom CSS section of wordpress in the theme options area? Everything else in there starts with a . and has a couple of these in there } { .

    #rc-imageselect {transform:scale(0.77);transform-origin:0;-webkit-transform:scale(0.77);transform:scale(0.77);-webkit-transform-origin:0 0;transform-origin:0 0; 0}

    I tried adding this before header and nothing happened.

    Reply

    1. holy crap!!!
      @media screen and (max-height: 575px){
      #rc-imageselect, .g-recaptcha {transform:scale(0.77);transform-origin:0;transform:scale(0.77);transform-origin:0 0; }
      }
      this did the trick.
      Thank you G-Goddess and Jon your code was what worked for me. Thanks guys, I was pushing my fingers in my eyes.

      Reply

    1. @jen Some of the class names have change slightly, so you will want to make sure that your css is targeting the correct elements.

      I’ve noticed that the #rc-imageselect element is located in an iframe and thus out of reach of css styles on the home page. It might be possible to apply something via javascript, but it would need to be triggered after the iframe loaded. Any thoughts?

      Reply

  55. I tried adding the styles in-line to a div wrapper around the captcha’s div. It worked fine on desktop but displays nothing on iphone (it causes the captcha to disappear). The fix provided above doesn’t work anymore.

    Reply

  56. brackets : }}

    Modify code:
    /* reCAPTCHA */
    @media screen and (max-height: 575px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.69);-webkit-transform:scale(0.69);transform-origin:0 0;-webkit-transform-origin:0 0;}
    }

    Reply

  57. Hi,
    I have gotten to make recaptcha is in middle of screen and responsive width a css code:

    #rc-imageselect, .g-recaptcha {
    display: inline; //the most important
    }

    #rc-imageselect{
    max-width: 100%;
    }

    .g-recaptcha>div>div{
    width: 100% !important;
    height: 78px;
    transform:scale(0.77); //the code to rescale the captcha obtained in this page
    webkit-transform:scale(0.77);
    text-align: center;
    position: relative;
    }

    I hope that this solution will be correct for you

    Reply

  58. In my case all is working fine without adding any css.
    I think google is detects device automatically and set layout based on it.
    If i checked in desktop browser by resize it(ctrl+Shift+M), then it is not working but in my mobile it is automatically fit to screen.

    Reply

  62. It would be far better if Google got over itself and didn’t brand the button.

    Any ideas for triggering the popup verification from the Submit button rather than the check box??

    Reply

  66. Perfect, thank you..!

    Typical of Google that it lays down the law to the Internet community about how sites should be built, but then breaks its own rules by releasing something like this without making it responsive..!

    Reply

  70. Hi. I used your fix to shrink the reCAPTCHA box on my website (www.jphcs.com) and it looks great on a monitor but when I look at it on my Android phone the tool is missing. Ideas? Thanks!

    Reply

  74. Hi
    I have had the same issue as everyone and tried your solution, which worked. Thank you.

    The issue is that it now creates when clicking on the page (with reCaptcha on), the site navigation list to flash up for less than a second before the page is loaded fully. If you remove the reCaptcha HTML Code Fragment from the page in Webplus X8 the issue goes way…

    I am not a coder and use Webplus X8 to do my website, but have managed to add your code in, but this has then created the issue – any thoughts would be welcomed.

    Thanks

    Reply

  80. Thank’s for tips but not really responsive, just fix size more small but show the horizontal scroll in mobile due to inner div width 304px.

    Please resolve this issue.

    Thanks a lot!

    Reply

  81. I came up with a different solution involving js. Google actually provides a data-size attribute which can be set to normal (default) or compact. What I did was to change the attribute based on the window size, the widget is then displayed in a square shape that fix perfectly on small mobile screens. Please see the code below

    jQuery(document).ready(function ($) {
    if ($(document).width() < 480) {
    $('.g-recaptcha').attr('data-size', 'compact');
    }
    else {
    $('.g-recaptcha').attr('data-size', 'normal');
    }
    });

    Reply

    1. I personally don’t like the compact version, and I believe it has been mentioned previously in this thread – but your thought is definitely a viable option for people. Thanks for contributing!

      Reply

  90. Thank you my friend. I think google should do something about this but you were faster than that :)
    Got a beautiful site. Best lucks…

    Reply

  101. Hi, I using the Genesis theme and if I add the code into my custom CSS it does not work for me yet. Do I need to place the code to any other place? Thanks for feedback.

    Reply

  103. Hi, the scale for me doesn’t worked, but I hava resolved forcing the iframe to be position absolute.

    .recaptcha {
    @media only screen and (max-width: $break-maxwidth-medium) {
    display: inline-block;
    }

    .g-recaptcha {
    @media only screen and (max-width: $break-maxwidth-small) {
    & > div > div {
    width: auto !important;
    }

    iframe {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    }
    }
    }
    }

    Reply

  105. Hey – any idea how to scale the captcha popup that comes up as well (i.e. the one that asks you to say pick the pictures with palm trees in them). I was able to scale the button itself but when a user needs to be verified, the dialog that shows up is way bigger than the screen.

    Reply

  108. DOESNT WORK FOR RESPONSIVE LAYOUTS. GEEK GODDESS YOURS SORT OF DOES FOR THE RECAPTCHA BUT THE UPDATE DOESNT WORK AT ALL. THANKS THOUGH ITS GOOD ENOUGH 4 ME ATM.

    Reply
  110. Post
    Author

  112. Hey thanks so much! this is great!

    I changed max-width to 479px – i am using recaptcha in Caldera form on my site.
    Btw, your code up top is missing a } bracket (update September 8, 2015:).

    @media screen and (max-width: 479px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.75);
    -webkit-transform:scale(0.75);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;}
    }

    Reply
    1. Post
      Author

      Oops! You’re right, I left off the end bracket for the media query. I’ve added it in now. Thank you! :)

      Reply

  115. thanks for wonderful site.

    BTW – how do you centered the re-captcha – or move it to the right side?
    our site is RTL and we need either to center it or to shift it to the right side.

    Best Regards,
    Shimon

    Reply

  116. Thank you that worked great across all platforms! You are seriously touched. I checked the code for your website and it seems like you’re using wordpress. Did you make this theme from scratch?

    Reply

  125. It works perfectly on my site!

    If needed, you could also add this block in your css file to eliminate unused blank space at right.

    .g-recaptcha div {
    width: 0 !important;
    }

    Thank you!

    Reply

  126. Hi,
    I am at my wits end.
    I am making a w3.css fully responsive website and the google recaptcha works fine in normal browsers but on my iPhone 6s after you click on “I’m not a robot” and the verify images pop-up appears, the focus of the web page goes all the wall down to the bottom of the page, so unless you scroll up again you don’t see that the verify images have appeared. Can you help me? The web site is in test mode at present but on the hosted server.

    http://www.midwayboats.co.uk/midway2/contact-us2.html

    Reply

  128. I found that if on mobile you have an containing div that makes the actual available space less than the full width you need something like:

    .g-recaptcha {
    transform: scale(0.8);
    -webkit-transform:scale(0.8);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    max-width: 240px;
    }

    and then set the max-width to what ever suits your site

    Reply

    1. Chris you’re a great help to me. Thank you so much! I was scratching my head as to why this was too small on mobile, and I just don’t have time to troubleshoot it. You’re a gem!

      Reply

  134. We could also add to /contact-form-7/modules/recaptcha.php the following code in function wpcf7_recaptcha_callback_script , just after var params = {…};

    var is_mobile = Number(width) < 500 ? true:false;
    params['size'] = is_mobile ? 'compact':'normal';

    You can change 500 to whatever size you consider to be max for mobile window width.

    This way for mobile version will have size as 'compact' while the desktop version will have size as 'normal'.

    This could be particularly useful for those using it with contact-form-7 on wordpress, like me.

    Reply

  140. The site name speaks for itself, the geekgoddess! Thanks. We found your site and its resolved. For those unsure, you can just add the CSS styles in any of your website stylesheet.

    Cheers.

    Reply

  143. div[id|=”g-recaptcha”]
    {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    }

    This worked for my on wordpress recaptcha build- Thank you :)

    Reply

  145. This worked for my on drupal recaptcha build too Thank you :)

    /* reCaptcha Responsivite */
    @media screen and (min-width: 992px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.7);-webkit-transform:scale(0.7);transform-origin:0 0;-webkit-transform-origin:0 0;}
    }
    @media screen and (max-width: 991px){
    #rc-imageselect, .g-recaptcha {transform:scale(1);-webkit-transform:scale(1);transform-origin:0 0;-webkit-transform-origin:0 0;}
    }
    @media screen and (min-width: 1200px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.9);-webkit-transform:scale(0.9);transform-origin:0 0;-webkit-transform-origin:0 0;}
    }

    Reply

  151. version 2.0 has added new attribute “data-size” with possible values of either “normal” (default) or “compact”

    Reply
    1. Post
      Author

      Hi Dan,

      Yes, that’s true – and has been mentioned a couple of times in this thread. However, this fix is for those of us who don’t want to use the compact version. This is a long thread though, so never hurts to mention again. :)

      Reply

  155. I went try all the CSS possible solutions suggested in this page and was not able to keep the reCaptcha from extending past the site container. Have not try the jquery function becasue I don’t know how to use it. How do you suggest I approach the problem?

    WP 4.7
    WP theme: responsivepro child
    reCaptcha V2

    Reply

  160. Ace! Thanks.

    style>
    #g-recaptcha-524 div {
    transform:scale(0.891);
    -webkit-transform:scale(0.891);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    }
    /style>

    Reply

  163. I am really most grateful to you that you have posted this article. This is a good solution….! Its really working on 320px width devices! I have searched on google a lot but not found any solution for the same excepting it.

    Reply

  167. Hello there! I have a big problem with those reCaptcha. I can’t even see it on my lap top. I tried everything ( different browsers, turn off firewall and windows defender, allow everything I could in google chrome and mozzilla, I try to resize it too, restart lap top, install latest version of browsers and java, java script, flash player, turn off every plugin, add on and extensions and still can’t see it. I can see it on another lap top and on my mobile.) So, can I write something like this in the ” inspect element ” to make it visible?

    Reply

  168. This is screen shot of where it should be a reCAPTCHA and ” inspect element” when I put a cursor on the invisible reCAPTCHA. I hope you will show up with some answer! Thanks in advance!

    Reply
    1. Post
      Author

  175. It works this way by keeping it centralized on smartphones and we can line up right on tablets.
    I’m using Bootstrap.
    Sorry for my English.

    /*========== Mobile First Method ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
    .form-group-recaptcha {
    position: relative;
    height: 5.5em;
    text-align: center;
    }
    .g-recaptcha {
    transform: scale(0.95);
    position: absolute;
    width: 100%;
    }
    .g-recaptcha div {
    width: 100% !important;
    }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
    .form-group-recaptcha {
    text-align: right;
    }
    }

    Reply

  177. if I am using a dumb wordpress template, where exactly would I paste this? I have paste it in the css style sheet and nothing changed for the contact form. is there an alternate place to paste this? thanks

    Reply

    1. In your wordpress dashboard you have to go to the following route: appearence > editor.
      Once you’re in, search the stylesheet (style.css) of your template.

      Move to the last line of the code and paste something like this:

      .g-recaptcha {
      transform:scale(0.77);
      -webkit-transform:scale(0.77);
      transform-origin:0 0;
      -webkit-transform-origin:0 0;
      }

      Then update file and… voilà!

      Reply

  185. I put the code on my WordPress site, but it’s still overflowing on my iPhone 5S. I’m just wondering how I can fix this issue.

    Reply

  193. Even when your solution worked sometimes. So, I came up with this solution based on yours:
    http://jsfiddle.net/y3597/328/
    Basically, the the recaptcha widget width is based by the container itself, not the screen size.
    Please check it and let me know what you think about it! :)
    Thanks you for the inspiration!

    Reply

  208. For iPhone6/7/8, I use the CSS below.
    Centers the rounded rectangle and adds a grey band in the background, making it less awkward:

    .g-recaptcha > div {
    width: 100% !important;
    text-align: center;
    position: relative;
    }
    .g-recaptcha > div:before {
    content: ”;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    background-color: #f0f0f0;
    height: 20px;
    margin-top: -10px;
    display: block;
    z-index: 1;
    }
    .g-recaptcha iframe {
    margin: 0 auto !important;
    display: inline-block;
    position: relative;
    z-index: 2;
    }

    Reply
    1. Post
      Author

  211. Good stuff just what I wanted. Interesting comments range over 3 years. Still not an ‘official’ solution. I like it as it does not need Javascript. Thanks again.

    Reply

  215. I was searching for this and finally got it,thank u for sharing the information.
    I also want know how i can manage the size of the entire form.

    Reply

  219. I have used your solution so many times, I thought I would finally stop and say THANK YOU! This is an invaluable solution. I use it in sidebars, where the sidebar is too thin to fit the reCaptcha – and it works like a charm. Appreciate the solution!!!

    Reply
    1. Post
      Author

  229. super. Was looking all over the net for this code- thanks Now my next search is customize the theme. Thanks once again.

    Reply

  244. What is this number 0.77? I see that I have a code wherein I would like to transform the captcha widget to fit the width of my other buttons. Trying a jquery from other link.. but no luck so far.. How’s this working on mobile? The number 0.77? What is it scaling the widget with?

    Reply
    1. Post
      Author

  249. is there a way to position the image(I mean the image to verify i m not a robot) which gets displayed after clicking on that reCAPTCHA or clicking on the checkbox

    Reply

  250. Hi this looks like just what i need, i use captcha on a sidebox on my desktop site and its too wide for the sidebox can anyone help with how i would write this to scale the size on the desktop
    Many Thanks

    Reply

  252. Great work!

    I made a small change:

    @media only screen and (max-width: 500px) {
    .g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
    }
    }

    Reply
    1. Post
      Author

  258. Hi Jaime and all,
    Happy new year ! :)
    Here is the css I use, thank’s to the inspiration find on this post :
    .g-recaptcha {
    width: 0;
    transform:scale(0.77) !important;
    -webkit-transform:scale(0.77) !important;
    }
    I use it on wordpress + divi, width:0 help to align on left.

    Reply

  262. I’ve found a way of truly responsive implementation to resize google captcha element:

    function resizeCaptcha() {
    var captchaElem = document.getElementsByClassName(“g-recaptcha”)[0]

    var captchaWidth = captchaElem.children[0].offsetWidth;
    var parentWidth = captchaElem.parentElement.offsetWidth;

    captchaElem.style.transform = “scale(” + (parentWidth / captchaWidth) + “)”;
    captchaElem.style.transformOrigin = “0 0”;
    };

    grecaptcha.ready(resizeCaptcha);

    addEventListener(“resize”, (event) => {resizeCaptcha()});

    Reply
    1. Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *