This code enables you to add a custom mobile responsive image which replaces the featured image at a specific screen width. In this example, its displayed once the screen reaches 800px however you can change this value to any other width.
The tutorial extends this tutorial Genesis Responsive After Header Featured Image 100% Width
Watch Demo Video #
Tested using the Genesis Sample child theme by StudioPress.
Adds a mobile image at 800px. The width of the image in this demo is 800px. If no image is added, it displays the featured image. If no featured image added, it displays the fallback image you can add via the custom customizer setting named After Header.
Installation #
There’s 3 steps relating to usage of the code in the download folder for registered users.
Step 1 : Add the PHP code from the functions file to the end of your child themes functions file.
Step 2 : Copy & paste the CSS below to the end of your child themes style.css file and clear caching.
You can then add a fallback image named img.jpg to your child themes images folder or and change this image using the customize > After Header setting.
Register or login to access the download folder :
Leave a Reply
You must be logged in to post a comment.