Site logo

Archived topic

HERO PAGE IMAGE RESPONSIVE

3 replies · Started by Juan on January 26, 2020

Viewing posts 1–4 of 4

Hi, I have a problem with my site's home page, on desktop it looks good but on mobile the image doesn't fit. I tried what you recommend in other similar questions in the support forum but I can't find the solution.

Hi there,

Two solutions for this:

- Change the background position on mobile with this CSS:

@media (max-width: 768px) {
    .page-hero.phalt {
        background-position: center center;
    }
}

- Use a mobile specific background image for this header element:

@media (max-width: 768px) {
    .page-hero.phalt {
        background-image: url(https://MOBILE-IMAGE-URL)
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

Thanks, it's solved, I was going crazy.

No problem :)

This archived topic is closed to new replies.