Responsive Design CAPTCHA / recaptcha
-
13-12-2019 - |
Frage
Ich erstellung also eine Rails-Anwendungs-Anwendungs-Anmeldeseite.Ich habe das Zurb Foundation Grid verwendet, um das Site-Layout zu erstellen.Das Problem, das ich habe, ist, dass, wenn das Gitter die Größenänderung ist, die Recaptcha nicht dasselbe tut, und fängt an, seine Grenzen zu verlassen.Es scheint keine Möglichkeit zu geben, das Layout neu zu lenken, indem Sie das JavaScript bearbeiten.Kennt jemand eine gute responsive Designlösung für Captcha und Rails?
Lösung
Sie können das Look und das Gefühl von Recaptcha anpassen:
Es ist nicht erforderlich, das Javascript zu ändern.Wenden Sie ansprechende CSS / HTML an, um mit dem Rest Ihres Layouts zu arbeiten.
Andere Tipps
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;
}
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;
}
}