[Support request] Different page hero element image on mobile

[leo]

I’m using the Aspire theme, with the page hero element. Is it possible to use different background hero images on desktop and mobile? It is impossible to find an image size that works well on both.

[Leo]

Hi there,

Give the page hero a class like my-page-hero, then this CSS should work:

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

Let me know if this helps 🙂

[leo]

This will not work, because there is a different hero image on every page.

[David]

Hi there,

there is no simple way to switch a background image to mobile aside of the method Leo suggested.

Personally i upload an image at the maximum size i require it e.g 1920 x 1080.
I then use the image ratio for combined top and bottom padding: 1080 / 1920 = 56%. This should keep the image in full view.

If you have content in the hero then you will need to adjust the % down to take into account. It takes a bit of trial and error but if you keep all images the same size and content to similar size will help.

[leo]

Thanks David, that is a method I was not really aware off. I’ll give it a go.

[David]

Let us know, but please note this won’t work if you are using the merged site header and full screen options.

[Foundry]

One option is to use the snippet that Leo provided:

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

Put it in your functions.php file (or an include, as I do). Wrap it with a custom function to grab a custom field for the mobile URL, set for each page you need it on. You can set it to have a fallback image, too. I’m not going to explain how to do that, there are plenty of resources a couple keys and clicks away.

This is a theory at this point.

I’m going to try it out and will report back if it suits our needs.

[David]

Hi there,

thanks for sharing your options – i am not sure if the OP is still is working on this as the topic is over 2 years old 🙂

Heres an example method where we swap the hero background image on mobile for a smaller attachment file:

https://generatepress.com/forums/topic/hero-header-lcp-and-psi-metrics-not-the-new-harry-potter-title/#post-1695561

You can change the variable to grab a custom field if required.

[Author]

Posts