Google search console y usabilidad movil

Preguntas sobre PrestaShop

Último Mensaje por Jhon hace 7 años

6 Respuestas

3 Usuarios

0 Reactions

510 Visitas

Angel

Respuestas: 101

Estimable Member

Topic starter

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

Respondido : 29/08/2018 9:38 am

Pepe

Respuestas: 41133

Illustrious Member 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

Respondido : 29/08/2018 11:27 am

Angel

Respuestas: 101

Estimable Member

Topic starter

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.

Respondido : 29/08/2018 12:10 pm

Pepe

Respuestas: 41133

Illustrious Member 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

Respondido : 29/08/2018 12:23 pm

Angel

Respuestas: 101

Estimable Member

Topic starter

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

Y muchas gracias, sois los mejores.

Respondido : 29/08/2018 12:54 pm

Jhon

Respuestas: 44989

Illustrious Member 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.

Respondido : 29/08/2018 6:41 pm

Ir al foro:

Tema anterior

Siguiente debate

Actualmente viendo este post 1 invitado.