This code makes the font size responsive so the text size increases and decreases when the size of the browser window changes without the addition of CSS for media queries.
The code enables you to add a image with text overlay. You can position the image using any Genesis hook and display it on specific pages using conditional tags.
By default, the image is hooked after the header on single posts. The featured image is displayed if added otherwise a backup image named backup.jpg is pulled from your child themes images folder, if one added.
The solution includes CSS rules for positioning the text (1) at the bottom of the image or (2) centered as you can see in the following demo video.
Video Demo
Shows the featured image displayed after the header on single posts with responsive text. When no image added, it shows a backup image from the same responsive text.
Register or login to access the code :
Was This Tutorial Helpful?