The solution in this Downloads folder enables you to display a custom header image on a smaller screen.
As seen in the demo video, your header image will be resized to fit any type of mobile device, and the header image you add via the Customizer will be displayed on the desktop.
demo video
Shows the mobile.png image from the Images folder displayed on the small screen in place of the image added via the Customizer.
Tested using Gallery Pro Theme for StudioPress.
installation steps
There are 3 stages:
- # around lines 102 – 103 in functions.php, modify the width and height values to match the dimensions of the header image you added via Customize > Header Image setting for your desktop version.
- # Copy and paste the CSS from the style.css file at the end of your Gallery Pro theme style sheet and clear the caching. Make sure the max-height and min-width values match the dimensions of the mobile version of your header image.
- # Put the mobile version of your header image in your Gallery Pro Theme images folder by making sure the file name matches Mobile.png which is used in the CSS.
download folder