This code enables you to display a text title on the left and a image on the right which is vertically aligned center with your text. On Mobiles, the text displays before the image with the image centered below the text.
Video Demo
Shows the image vertically centered on desktops and underneath the text on mobiles.
Tested using the Breakthrough Pro child theme by StudioPress with a .webp image 2000 pixels in width.
Installation
There’s 3 steps for installation :
1. Here’s the HTML which goes in Customize > Breakthrough Pro Settings > Hero Section Headings > Hero Title field.
2. Upload your image to your WordPress media library and swap out the image link in the above HTML from step 1. In this example, i used a .webp image.
3. Copy & paste the CSS from the download folder to the end of your Breakthrough Pro themes style-front.css or style.css file and clear caching.
Leave a Reply
You must be logged in to post a comment.