Отзывчивый дизайн CAPTCHA / RECAPTCHA

Question

Так что я создаю страницу регистрации приложений Rails.Я использовал Gurb Foundation Grid для создания макета сайта.Проблема у меня есть то, что когда сетка изменяется размера, recaptcha не делает то же самое, и начинает выходить из своих границ.Похоже, нет способа перепроектирования макета, короткого редактирования JavaScript.Кто-нибудь знает хорошее отзывчивое решение для дизайна для капчи и рельсов?

Answer 1

Вы можете настроить внешний вид recaptcha:

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

Нет необходимости изменять JavaScript;Применяйте отзывчивые CSS / HTML для работы с остальной частью вашего макета.

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