Replace Default Header Hero With Different Image On Mobiles – Essence Pro

This tutorial provides 2 different ways to change the default header hero image hero-bg.jpg with another image of any size, at any screen width.

The following images show the desktop ( default ) image on the left and the mobile image on the right :

Desktop

Mobile

Watch the following demo video to see how it works :

Demo Video #

Shows a different image displaying on mobiles

Code Installation #

Solution 1 – There’s 2 steps :