Archived topic
Header element overview -Mobile
5 replies · Started by Edna Lucía on February 20, 2021
He realizado Héroe de la página, un encabezado sólo para mi blog y utilicé una imagen de fondo. Cuando lo veo en vista de escritorio se ve perfecto pero en el móvil la imagen no queda bien.
He intentado diferentes porcentajes de relleno para la versión móvil, también he probado con todas las posiciones de fondo, incluso he probado modificando la altura de compensación de la cabecera de sitio. Pero al parecer, no hay forma que quede la imagen bien centrada en el móvil como sí sucede en vista de escritorio.
Alguien me puede guiar?? Gracias!!!
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hola Leo! Gracias por responder.
Te envío en privado la información. Si necesitas alguna otra, puedo enviarla sin problema.
Muchas gracias.
It's a bit tricky to deal with as the "Blog" text is in the image.
There are two options I can think off:
- Use a background image without the "blog" text and add the text as the page hero content:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content
- If you prefer to keep the text in the image itself, then try using a separate image on mobile only using this CSS:
@media (max-width: 768px) {
.blog .page-hero {
background-image: url(https://mobile-background-image-URL);
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Hola Leo! Muchas gracias por tu respuesta.
Soy nueva en estos tema. Ya yo escribí el CCS adicional y ha desaparecido el encabezado en la vista móvil, sólo está un espacio en blanco. Puedes darme indicaciones: cómo puedo agregar una nueva imagen para el encabezado sólo para móvil? Lo debo hacer por la misma opción "elementos" como hice el encabezado de desktop?
Gracias de nuevo!
Hi there,
I've checked your site and you didn't include an image URL to the code Leo provided as shown here:
https://share.getcloudapp.com/X6u9EJeJ
You're supposed to change the https://mobile-background-image-URL from the code Leo provided to the URL of the image you want to apply on mobile.
Example:
@media (max-width: 768px) {
.blog .page-hero {
background-image: url(https://soylucia.com/wp-content/uploads/2021/01/cropped-Soy-Lucia-Logo.png
);
}
}