18 Mart 2016 Cuma

Responsive Recaptcha

iletisimformu.cshtml 
var recaptchaUrl=string.Format("https://www.gstatic.com/recaptcha/api2/r20150714174420/recaptcha__{0}.js", lng);
    <div class="form-group ">
          <div class="captcha">
                   @using Recaptcha;
                   @Html.Raw(Html.GenerateCaptcha(string.Empty, "clean", "tr", null))
                             
        </div>
</div>

recaptcha.css 
@media(max-width:991px) {
    #recaptcha_challenge_image {
        margin: 0 !important;
        width: 285px !important;
    }

    #recaptcha_response_field {
        height: 40px;
        padding: 10px;
        width: 285px !important;
    }

    .recaptchatable #recaptcha_image {
        width: 100px !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 {
        background: none !important;
        width: 150px !important;
    }
}

@media(max-width:767px) {
    #recaptcha_challenge_image {
        margin: 0 !important;
        width: 125px !important;
    }

    #recaptcha_response_field {
        height: 40px;
        padding: 10px;
        width: 125px !important;
    }

    .recaptchatable #recaptcha_image {
        width: 100px !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 {
        background: none !important;
        width: 150px !important;
    }
}


#recaptcha_challenge_image {
    margin: 0 !important;
    width: auto;
}

#recaptcha_response_field {
    height: 40px;
    padding: 10px;
}

.recaptchatable #recaptcha_image {
    width: 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 {
    background: none !important;
    width: 50px !important;
}