Avisos
Vaciar todo

Imagen de cabecera se ve cortada en tablets  

 
Laura
 Laura
Usuario activo

Hola.

Tengo plantilla Génesis Metro Pro y he puesto una imagen en la cabecera de los píxeles que se recomienda en Imagen de cabecera :
"Aunque puedes recortar imágenes a tu gusto después de hacer clic en Añadir nueva imagen tu tema recomienda un tamaño de cabecera de 620 × 81 píxeles."

La imagen se ve bien en móviles y ordenadores pero en tablets (he probado en 2 ipads diferentes) se ve cortada por la 3ª-4ª letra.

En páginas como mobiletest y similar sí aparece completa si selecciono tableta como soporte en el que ver la web, pero en las tablets que he comprobado yo mismo sale como ya he comentado.

¿Tengo que tocar algo en otro sitio para que se vea bien?

Gracias.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 12/01/2017 9:09 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Prueba lo siguiente: edita el archivo wp-content/themes/metro-pro/style.css y, previa copia de seguridad del mismo, localiza el siguiente código:

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.home-middle-left,
	.home-middle-right,
	.sidebar-primary,
	.title-area {
		width: 272px;
	}

Cámbialo por este otro:

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.home-middle-left,
	.home-middle-right,
	.sidebar-primary {
		width: 272px;
	}

Con esto evito que se fuerce el ancho de 272 píxeles para la caja del título cuando el ancho de la ventana del navegador es entre 1024 y 1139 píxeles.

Una vez aplicado el cambio, si ves que no funciona en la tablet prueba a forzar la recarga de la página, ya que es posible que tengas el archivo css cacheado.

ResponderCitar
Respondido : 12/01/2017 1:21 pm

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

Laura
 Laura
Usuario activo

Hola Pablo.

Lo que he hecho para no meter mato en el fichero style.css es descargarme el plugin Simple Custom CSS.

He pegado el texto que me pones de esta manera:
/*
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.home-middle-left,
.home-middle-right,
.sidebar-primary {
width: 272px;
}
*/

He actualizado y la página no cambia. En ordenador se sigue viendo entero y en la tablet cortado.

¿Así como lo he hecho estaría bien o no queda otra que tocar directamente el style.css?
En la medida de lo posible quiero usar métodos alternativos que hace unos días tuve que recuperar todo por andar tocando.

Muchas gracias.

ResponderCitar
Respondido : 13/01/2017 7:09 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Puedes utilizar un Custom CSS para aplicar el cambio, pero el código que has puesto no es correcto. Lo que has añadido es tu custom CSS es un estilo comentado, lo que es equivalente a no haber añadido nada.

Prueba a añadir en su lugar lo siguiente y verifica si funciona:

@media only screen and (max-width: 1139px) {
	.title-area {
		width: auto;
	}
}
ResponderCitar
Respondido : 13/01/2017 10:50 am

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

Laura
 Laura
Usuario activo

Sigue sin cambiar nada. He borrado las cookies y el historial en la tableta antes de actualizar con los cambios y nada.

¿No queda otra que entrando en style.css con lo que escribiste en la primera respuesta?

ResponderCitar
Respondido : 14/01/2017 11:35 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Laura.

Prueba a añadir el siguiente código en el plugin custom que te descargaste:

@media only screen and (max-width: 1139px) {
.title-area {
    height: auto;
    width: 100%;
}
}

Si añadiéndolo al plugin sigue sin funcionar, realiza lo siguiente:
.- Edita el archivo style.css que encontraras en wp-content/themes/metro-pro/style.css y al final del archivo añade lo siguiente:

@media only screen and (max-width: 1139px) {
.title-area {
    height: auto;
    width: 100%;
}
}

Un Saludo

ResponderCitar
Respondido : 14/01/2017 1:42 pm

Cursos Gratuitos WordPress

Laura
 Laura
Usuario activo

¡Con lo primero funciona!

Muchas muchas gracias.

ResponderCitar
Respondido : 14/01/2017 11:17 pm