Google search console y usabilidad movil  

 
Angel
 Angel
Estimable Member

Buenos días,
desde Google search console me indican que tengo cerca de 350 páginas con problemas de usabilidad móvil y me dan estos dos errores:
· Los elementos en los que se puede hacer clic están demasiado cerca unos de otros.
· El contenido es más ancho que la pantalla.
Yo, tengo un móvil relativamente pequeño y lo veo bien, no se que hacer. ¿Podéis ayudarme? Gracias.
Saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 29/08/2018 10:38 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola teresa.

En principio el problema que veo son las imágenes que tienes en footer:

Veo el siguiente código:

en vez de utilizar "

" podrias crear una calase CSS para esas imagen y envolver las imagenes con esa clase. por ejemplo:

.- Creamos la clase CSS " imagenespagos "

.imagenespagos {
float:left;
 }

.- Añadimos la clase para la versión móvil.

 @media screen and (max-width: 600px) {
.imagenespagos {
float:none;
 }
}

Una vez eso seria envolver las imágenes con ese div:

<img src=" https://laherbo............

Un Saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 29/08/2018 12:27 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Angel
 Angel
Estimable Member

Hola, gracias por tu ayuda. Te comento.
He incluido las instrucciones en negrita en mi global.ccs
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px; }
/* Comentario: lineas añadidas para imagenes pie en moviles */
.imagenespagos {
float:none; }
}

.imagenespagos {
float:left; }

y luego he hecho lo que me indicabas:

¿Puedes comprobar lo que he hecho y darme el ok?
Muchas gracias de nuevo.

ResponderCitar
Respondido : 29/08/2018 1:10 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Teresa.
No, te falto añadir el media para la version movil.

Esto es lo que muestras:

.imagenespagos {
float:none; } }

Y tiene que ser esto:

@media screen and (max-width: 600px) {
.imagenespagos {
float:none;
 }
}

Luego sigo viendo el código de inserción de las imágenes con la clase anterior:


<img src=" https://laherboristeca.com/modules/contentbox/img/letencrpypt.jpg "

Tendría que ser:

<div 

<img src=" https://laherboristeca.com/modules/contentbox/img/letencrpypt.jpg "

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 29/08/2018 1:23 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Angel
 Angel
Estimable Member

Yo creo que ya. Confírmelo, por favor.

Y muchas gracias, sois los mejores.

ResponderCitar
Respondido : 29/08/2018 1:54 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Ya veo que tienes añadido el contenedor, sin embargo podrías aplicar clases adicionales, es decir en lugar de tu código anterior prueba con el siguiente código CSS:

@media screen and (max-width: 600px) {
	.imagenespagos {
		float:none;
		width:100%;
	}

	.imagenespagos img {
		float: none;
		display: block;
		text-align: center;
		margin: auto;
	}
}

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 29/08/2018 7:41 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación