[Support request] Elements – Page hero – Custom image not responsive

[Jorge]

I work with Elements. I make a hero page.
I use custom image as background and it’s not responsive when I look at it on small screens.
How can I make the custom image look complete on small screens?
Thank you,
Jorge

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

You will need to use custom CSS like this:

@media (max-width: 768px) {
    .page-id-xx .page-hero {
        background-image: url(http://MOBILE-BACKGROUND-IMAGE-HERE);
    }
}

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

Make sure to get the actual page ID and replace the xx in .page-id-xx above.

Let me know if this helps 🙂

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

[Jorge]

I apologize, but I’ve tried your instructions and I still see a huge image on cell phones, the background is not responsive.
If you need to access and see in the dashboard, please let me know.
Thank you
Jorge

[David]

Hi there,

the simplest way is to use % padding only on the top ( or bottom ) of the page hero.
The % needs to match the image aspect ratio, your images have a ratio of around 31% that is the height divided by the width.

So try removing your padding, and adding 31% to just the top padding. They will then remain responsive.

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

[Author]

Posts