[Support request] Header element overview -Mobile

Home Forums Support [Support request] Header element overview -Mobile

Home Forums Support Header element overview -Mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1666158
    Edna Lucía

    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!!!

    #1666199
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1666396
    Edna Lucía

    Hola Leo! Gracias por responder.

    Te envío en privado la información. Si necesitas alguna otra, puedo enviarla sin problema.

    Muchas gracias.

    #1666891
    Leo
    Staff
    Customer Support

    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 🙂

    #1667139
    Edna Lucía

    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!

    #1667276
    Elvin
    Staff
    Customer Support

    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
    );
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.