Google search conso...
Avisos
Vaciar todo

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

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

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

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

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

Cursos Gratuitos 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.

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

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