Diseño responsivo CAPTCHA / REFTCHCHA

Question

Así que estoy creando una página de registro de aplicaciones de RAILS.He usado la cuadrícula de la Fundación Zurb para crear el diseño del sitio.El problema que estoy teniendo es que cuando la cuadrícula está cambiando, la recaptcha no está haciendo lo mismo, y comienza a salir de sus límites.No parece haber una forma de rediseñar el diseño corto de editar el JavaScript.¿Alguien sabe de una buena solución de diseño sensible para CAPTCHA y RAILS?

Answer 1

Puede personalizar el look y la sensación de recaptcha:

• https://developers.google.com/recaptcha/docs/customization

No hay necesidad de modificar el JavaScript;Aplique CSS / HTML sensible para trabajar con el resto de su diseño.

Answer 2

make it by css

@media (max-width: 444px) {

.recaptchatable #recaptcha_image {
margin: 0 auto !important;
width: 200px !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;
}

}

or

.recaptchatable #recaptcha_image {
      width:  30em !important;
  }

  #recaptcha_image {
     display: block;
     margin: 0 auto !important;
  }

  .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_c1,
  .recaptchatable .recaptcha_r4_c2,
  .recaptchatable .recaptcha_r4_c4,
  .recaptchatable .recaptcha_r7_c1,
  .recaptchatable .recaptcha_r8_c1 {
      background: none !important;
  }

  .recaptcha_only_if_privacy,
  .recaptchatable td img,
  #recaptcha_reload,
  #recaptcha_switch_audio,
  #recaptcha_switch_img,
  #recaptcha_whatsthis {
      display:none;
  }

Answer 3

If you dont want to use custom theme this will help.

@media (max-width: 444px) {
    .recaptchatable #recaptcha_image {
        margin: 0 !important;
        width: 200px !important;
        float:left !important;
    }
    .recaptchatable #recaptcha_image img {
        max-width:100%;
    }
    .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, .recaptchatable .recaptcha_r2_c2 {
        background: none !important;
    }
}