[Resolved] HERO PAGE IMAGE RESPONSIVE

[Juan]

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.

[Leo]

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 🙂

[Juan]

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

[Leo]

No problem 🙂

[Author]

Posts