Desde luego es un problema que en la versión escritorio se muestre correctamente, pero en diversas resoluciones móviles se muestre de una forma no responsiva, no adaptada a la navegación móvil.
Y para muestra un botón, o mejor dicho un par de ellos:
Aquí tenemos un ejemplo del problema de Google reCAPTCHA no responsive, navegando desde un smartphone, a una resolución de 240X320px:
El segundo ejemplo no responsive, no adaptado a navegación móvil, con la resolución 320X240px:
Como se puede ver claramente, la capa del Google reCAPTCHA se va de madre… nada responsive.
Ya podría el señor cacique Google aportar una solución por su parte, ya que le dan tanto énfasis al tema de tener una web adaptada a los dispositivos móviles.
Vamos pues a aportar una solución para conseguir un Google reCAPTCHA adaptado a la navegación móvil, que la chica de Geekgoddess.com publicó en su blog hace tiempo, junto con algunos otros usuarios que se animaron a a comentar y mejoraron dicha solución.
Atención, pregunta:
Pues no, porque al ser un javascript que carga externamente, poco podemos hacer.
Pero lo que sí que podemos controlar es la capa que se coloca en nuestro sitio web con la clase g-recaptcha, que permite cargar el CAPTCHA.
Yo también aportaré mi pequeño granito de arena, partiendo de la solución dada por ellos, que es lo que me ha ayudado a ver la luz, para hacer el Google reCAPTCHA responsive.
Primero, buscando en el foro de soporte del plugin Contact Form en WordPress.org (que permite añadir el Google reCAPTCHA en los formularios de contact form) nos encontramos en tercera página (a fecha 8 de marzo de 2016) con este tema:
https://wordpress.org/support/plugin/contact-form-7/page/3/
Y en dicho tema encontramos el enlace que nos lleva al blog de Geekgoddess :
https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/#comment-302
El CSS que proponen desde ahí es el siguiente:
Por supuesto es personalizable a cada sitio web, si modificamos las propiedades de
transform:scale(0.77);
y
-webkit-transform:scale(0.77);
Podemos cambiar el valor de 0.77 por otro que se adapte mejor en cada caso.
Y en este punto, os doy mi idea, desarrollada a partir del post de Geekgoddess.com (las cosas como son) y aderezando un poco de mis pequeños conocimientos de CSS:
Se trata de una solución personalizada para cada resolución. (Sí, lo se, lleva trabajo, nadie dijo que las cosas fueran fáciles, pero si quieres presumir de tener un Google reCAPTCHA responsive 100% en todas las resoluciones, aquí tienes una idea).
Se trata de hilar más fino todavía.
Al principio del post os mostraba un par de capturas de resoluciones móviles que mostraban el google captcha no responsive, y con estas modificaciones CSS (al menos para el sitio web al que se aplica en este caso) FUNCIONA PERFECTAMENTE (requiere personalización para cada sitio web, haz tus pruebas):
@media screen and (max-width: 240px){
.g-recaptcha {
transform:scale(0.58);-webkit-transform:scale(0.58);
transform-origin:0 0;-webkit-transform-origin:0 0;
}}
@media screen and (min-width: 319px) and (max-width: 320px){
.g-recaptcha {
transform:scale(0.79);-webkit-transform:scale(0.79);
transform-origin:0 0;-webkit-transform-origin:0 0;
}}
Pues ala, ahí queda eso! 😉
Por último, solo por mencionar otras formas de conseguir un Google reCAPTCHA responsive y adaptable, os dejo la solución CSS que desde stackoverflow.com nos ofrecían (a fecha 23 de octubre de 2015)
(A mí no me da buen resultado personalmente, y creo que es mejor la solución personalizada que he aportado previamente, pero probadlo! )
#rc-imageselect, .g-recaptcha {
display: inline; //the most important
}
#rc-imageselect{
max-width: 100%;
}
.g-recaptcha>div>div{
width: 100% ;
height: 78px;
transform:scale(0.77); //the code to rescale the captcha obtained in this page
webkit-transform:scale(0.77);
text-align: center;
position: relative;
}
¿Te ha solucionado algo este artículo?
No dudes en dejar tu opinión y comparte! 😉