Responsive Website Design & ReCaptcha

[Huskiez12]

Hi all,

I'm working on a website that features a responsive design. We're currently using ReCaptcha in the Contact Form and on a desktop it appears fine but on a mobile platform, like an iPhone 5S, it's stretching the web form out of the boundaries it's meant to be limited to, causing the rest of the form to extend as well.

Is there a way to adjust the ReCaptcha module so that it adjusts its size on mobile devices and appears correctly?

I've found ways to "create" a responsive ReCaptcha (i.e.: http://jaicab.com/responsive-reCAPTCHA/) however that requires access to the code which we don't.

Let me know if there's anything that we can do.

Thanks

[Lynda-S]

That solution won't work as you know because we don't have access.

You can inspect and override the captcha CSS. I have done that in some cases to make it look correct with a site. Can take some time to do but is possible with BC.

[Liam Dilley · Accepted solution]

You can override the CSS on recaptcha and run media queries etc. So you can manipulate it in that sense.

[AnneGerber]

I got mine to work with: div#recaptcha_area, div#recaptcha_table {zoom:.85; }

[Liam Dilley]

Will need a lot more then that to make it work properly on devices (not just scaling your browser window in 2 web browsers where zoom works), You end up with quite a lot of CSS overrides.

[http___www_a1websites_co_]

Hi , Congrats you all found the solution for Responsiveness of Re Captcha in Business Catalyst , No Do nt need to Worry Now , Just placed this Code in your Mobile View Media Query , and Everything will work Perfectly

@media screen and (max-width: 480px){

    .recaptchatable .recaptcha_r4_c4,.recaptchatable .recaptcha_r1_c1,.recaptchatable .recaptcha_r2_c1,.recaptchatable .recaptcha_r2_c2,.recaptchatable .recaptcha_r3_c1,.recaptchatable .recaptcha_r3_c2,.recaptchatable .recaptcha_r3_c3,.recaptchatable .recaptcha_r4_c2,.recaptchatable .recaptcha_r4_c4,.recaptchatable .recaptcha_r7_c1,.recaptchatable .recaptcha_r8_c1{

        background:none !important;}

.recaptchatable .recaptcha_image_cell{

        background:none !important;}      

#recaptcha_image{

    width:100% !important;}

#recaptcha_image img{

    display: block !important;

    height: auto !important;

    max-width: 100%;

    width: 100%;

}

.recaptchatable .recaptcha_r2_c1{

    display:none;}

.recaptchatable td img {

    display: block !important;

}  

#recaptcha_area, #recaptcha_table {

    width: 100% !important;

}      

}

[WillzShireDDC]

Having trouble Resizing {module_recaptcha version="2"}  for responsive site.

Tried CSS suggestion above but not changing size.

<div class="recaptcha_r2_c2">

                  <label>Please Help Prevent Robot Attacks <span class="req">◆</span></label>                                    

                  {module_recaptcha version="2"}

                  </div>

Please advise

Thanks, Willz