ruby-on-rails - レスポンシブ デザインのキャプチャ/レキャプチャ

Question

そこで、Rails アプリケーションのサインアップ ページを作成しています。サイトのレイアウトを作成するために、Zurb Foundation グリッドを使用しました。私が抱えている問題は、グリッドのサイズが変更されているときに、recaptcha が同じことをしていないことであり、その境界から外れ始めます。JavaScriptを編集する以外に、レイアウトを再設計する方法はないようです。キャプチャとレールの優れたレスポンシブ デザイン ソリューションを知っている人はいますか?

Answer 1

reCaptcha のルック アンド フィールをカスタマイズできます。

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

Javascript を変更する必要はありません。レスポンシブ CSS/HTML を適用して、レイアウトの残りの部分を操作します。

Answer 2

カスタム テーマを使用したくない場合は、これが役立ちます。

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

Answer 3

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