Overriding google recaptcha css to make it responsive

Google has complete documentation on how to style recaptcha forms here:

https://developers.google.com/recaptcha/docs/display

and you can completely override the html/css they provide with your own.

For reCAPTCHA (requires jQuery):

$(function(){
  function rescaleCaptcha(){
    var width = $('.g-recaptcha').parent().width();
    var scale;
    if (width < 302) {
      scale = width / 302;
    } else{
      scale = 1.0; 
    }

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

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

});

This basically checks your browser width and depends the scale it should be transformed too. Best solution around at this point.

Screenshots result (full width, smaller width, smallest width):

Changed auto height and media query

@media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

}

You may want to add some CSS styling but we opted for removing everything that wasn't necessary.

Add this code to your css file :

@media (min-width: 320px) and (max-width: 480px) {
        #recaptcha_challenge_image{
        margin: 0 !important;
        width: 100% !important;
        }
        #recaptcha_response_field
        {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 100% !important;
        }
        .recaptchatable .recaptcha_r1_c1, 
        .recaptchatable .recaptcha_r3_c1, 
        .recaptchatable .recaptcha_r3_c2, 
        .recaptchatable .recaptcha_r7_c1, 
        .recaptchatable .recaptcha_r8_c1, 
        .recaptchatable .recaptcha_r3_c3, 
        .recaptchatable .recaptcha_r2_c1, 
        .recaptchatable .recaptcha_r4_c1, 
        .recaptchatable .recaptcha_r4_c2, 
        .recaptchatable .recaptcha_r4_c4, 
        .recaptchatable .recaptcha_image_cell {

        margin: 0 !important;
        width: 100% !important;
        background: none !important;
        }

    }