响应式设计验证码/再验证码

Question

所以我正在创建一个rails应用程序注册页面。我已经使用了Zurb Foundation网格来创建站点布局。我遇到的问题是，当网格调整大小时，recaptcha不会做同样的事情，并开始超出它的界限。除了编辑javascript之外，似乎没有办法重新设计布局。有没有人知道用于captcha和rails的响应式设计解决方案？

Answer 1

您可以自定义reCaptcha的外观：

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

不需要修改Javascript；应用响应式CSS/HTML来处理布局的其余部分。

Answer 2

通过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;
}

}

或

.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

如果你不想使用自定义主题，这将有所帮助。

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