[Rufus]

Hi – I realise this has been asked a few times for different themes but I can’t get anything to work! I’m trying to specify an alternate header image for mobile screen widths but everything I try in CSS doesn’t seem to work. I also can’t find any plugins which might be suitable. Has anyone achieved this with Mantra or aware of a plugin?

[Rufus]

Closest I can get is the rather suspiciously simple:

@media (max-width: 800px) {
img#bg_image {
content: url(“/path/to/my/replacement/image”);
}
}

But this is, I think, just putting the image in front of the existing one. Both are being requested on browser widths at and below 800px when I check in a web inspector.

[Zed]

You can customize the mantra_title_and_description() function (defined in theme-functions.php) via a child theme to make it output an image srcset for the header image (leaving the browser choose the desired image file based on screen size).

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Rufus]

Thanks! Will take a look.

[Author]

Posts