You’ve created a fantastic WordPress website, you’ve made it mobile responsive, and it’s filled with interesting and useful content. It’s perfect. . .
Except for one thing.
When someone looks at your site in a tablet or on a smartphone, they only see a tiny bit of that glorious header image you spent so much time with.
Sadly, just because your theme is mobile responsive, it doesn’t mean that header image will be equally responsive.
There’s good news, though. If you’re using a StudioPress theme on the Genesis Framework, there’s a new plugin in town that’ll take care of that pesky header problem.
It’s called the Genesis Responsive Header Plugin. It was created by “Nick the Geek,” long-time programmer and tech-support guy at Copyblogger Media (the folks who own StudioPress).
You can download the plugin here. (It’s free.)
Note: If you’re using one of the new or updated themes with “Pro” in the name, this plugin won’t work. It’s designed for the themes that aren’t yet HTML5 compliant.
Go ahead and install it —find instructions here. Scroll down to the part where it says, “Installing the Plugin as an Upload from your Computer.”
Resize your Header Image
The Genesis Responsive Header plugin substitutes smaller versions of your header when someone’s looking at your site on a smaller device. You have to create those.
#1. Open your header image in a photo or paint program.
I like Paint.net, which is a free program you can download here. It doesn’t really matter what program you use as long as it allows you to resize an image.
#2. Create four new images
You’re going to resize and save four smaller versions of your original header image.
Make sure you set your program to maintain aspect ratio. Some programs say keep proportions. That means when you adjust the width, the height will automatically change to keep the proportions the same — otherwise you can end up with some very strange-looking images!
Here are the image sizes you want:
Add the Images to the Customizer
Now, on your WordPress dashboard, navigate to Appearance / Customize.
After you click the Customize link, you’ll see four places to upload an image, and four places to specify a background color.
To add the first image, click the dropdown button under the words “768px Logo Image.” Drag and drop your image, or select the file.
Then choose your background color from the dropdown button under the words “768px Header Background Color.” In this case, I chose white.
Continue with each item in turn. When you’re finished, you’ll have something that looks like this.
When you’re done adding images, click the Save button above, and you’re all set.
Test your New Header Images
If you have a variety of devices — tablet, smartphone, etc. — just browse to your site and take a look. You should see that the header image changes its size to fit nicely into the space available on each device.
If you don’t, you can still test it.
StudioPress has a handy mobile responsive testing page. Just enter the web address for your WordPress site, and they’ll show you how it looks in a standard smart phone (upright), smart phone (sideways), small tablet and large tablet, as well as standard computer screens.
Here’s how this site looks now that I’ve made the header mobile responsive.
Notice that the header image has adjusted itself beautifully to fit each size screen. I can also see I’ve got a problem with the columns underneath, though. In the smallest size, they’re overlapping. I obviously have some work to do…