Google search console y usabilidad movil

Último Mensaje

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

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:


          seo score

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

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

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

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

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