Responsive design is an important feature of a good website. The ability of your site to adjust to different screen sizes and still look good is something that visitors remember. If you are using a good WordPress theme and framework, responsiveness is often built into the design. Even then, you might run into a few issues.
ScanThisGuide.com before any changes (besides changing the header image size)
I just launched a site, ScanThisGuide.com, using the Focus child theme built on the Genesis framework. Everything was going well with the design until I checked it on my iPhone. The site looked great except for the header. After a little digging around on Google, it seems that other users are having similar problem. After a little more digging, I found several possible solutions, including a plugin and some extensive code changes, but one that stood out to me because it was simple.
(The Focus child theme and the Genesis framework are both great products I personally use. If you buy using these links, I get a small commission. Not much, but it doesn’t cost you anything extra and I can go buy a cup of coffee.)
A special thanks to Antonios007 from GitHub where I learned of the CSS changes that needed to make for the header image to be more responsive.
Resize the header image
During the site design, the header image that I wanted to use was much smaller than what the Focus child theme was setup to handle. To add a custom header image to the Focus child theme, you go to Appearance->Header under the WordPress admin dashboard. Once there, you can upload and crop your header image. The problem I ran into was the size and aspect ratio it wanted.
Apparently, there is no way to upload an image that is not 1060px wide and 120px without cropping and re-sizing. My image is 390px wide and 130px tall. After a little Google research and experimentation, I found the place where the Focus child theme added a custom header to the Genesis framework (in functions.php):
/** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 1060, 'height' => 120 ) );
As you can see, the width and height are both specified. Here’s a screenshot of what it looked like originally when uploading a custom header:
Notice that the header image needs to be 1060px by 120px to be used as-is. If you upload an image of a different size, you must crop it using the same proportions. Since my image was 390px by 130px, I changed the specified width and height in the functions.php file. Here is what it looks like now:
/** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 390, 'height' => 130 ) );
A simple but important change. Let’s see what it looks like when adding a custom header after the change:
ScanThisGuide.com after making the header responsive but without a custom header size
As you can see, the dimensions of the required image is the same size as my header image. Once uploaded, the header image will be displayed properly.
This step is important to the responsive header image but I had no idea until I started tweaking. If the header image is kept the full 1060px wide, the result is like the image to the right. Since the logo is small, the most interesting part of the header image is hard to see. This detail was not obvious until the changes below were made.
Editing the CSS code for small screen sizes
The CSS code controls almost everything about the design of your website, including the colors, positions, and even how it is displayed on certain devices. Looking at the style.css for the Focus child theme, you will see the code that controls the responsiveness of small screens. Near the bottom of the file you will see this line of code:
@media only screen and (max-width: 600px) {
Anything under this declaration block will modify what happens when a small screen views your site. This section is the one that controls the formatting when your site is viewed on an iPhone or other small screen. Looking at the file provided by Antonios007 from GitHub, the following lines of code need to be added under this declaration block:
#header {
background-size: contain !important;
height: 110px; /* original: min-height: 100%; */
overflow-y:hidden;
}
Notice that part of the second line changed. The original code snippet from Antonis007 set a minimum height of 100%. In effect, this set the height of the header to 100% of the height the header image. Unfortunately, my header image was too wide, resulting in the screenshot at the top of the page. The height was specified to be 110px, a value that was determined through trial and error once the header image was responsive.
Editing the CSS code for the Image Header – Partial Width
The last piece of the puzzle was a small change in the main body of the styles.css file. It can be quickly found by doing a search in the browser. The code that needed to be changed is as follows (colored red):
/* Image Header - Partial Width
------------------------------------------------------------ */
.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 100%; /* height: 120px; */
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;
}
Instead of specifying the height to a specific size (the commented property), you need to change it to 100%.
Once these changes were made, the header image is now responsive. Take a look:
ScanThisGuide.com after all changes
Notice that the logo fills the width of the screen. At this point, it would be fairly easy to tweak the size and placement of the header image for small screens. Be sure to check your page on different devices to make sure it looks right. For this site, anything larger than an iPhone turned out fine since the width of the header image was less than the width of the screen.
Congratulations, if you are using the Focus child theme or a similar theme, you should be able to modify your code enough to have your very own responsive header image. If you are looking for a great responsive theme, be sure to check out the Genesis framework. Remember, having a responsive web site is an important part of the user experience. Having a consistent look to your site across multiple devices will help visitors identify with your brand and have a better experience. Good luck.
Are you using the Genesis Framework?
If you are using the Genesis Framework, congratulations. It’s a great system. Here are a few articles you might be interested in that feature the Genesis Framework:
*** Update ***
After updating my iPhone to iOS 7.03, the header image is not resizing properly. I’ve tried to specify the width (both in pixels and percentage), change the size of the background, plus more but nothing has worked yet. Any ideas? As soon as I find a solution, I’ll post it here.
*** Solution ***
After ignoring the situation for months and completely disregarding the advice of the maker, I decided to change the core Genesis files. Genesis was updated just a few days ago to 2.1.2 which spurred this action. The good news is that it worked and only requires a very small change. Unfortunately, each update to the Genesis framework will require the same change but to me, that is a small price to pay for a better header image.
So, here’s what the site looked like before the change and after:
As you can see, the logo on the left is way too big. It was not resizing correctly in iOS 7.1.2 (current version). After the change, it looks right as rain.
In landscape, the logo is not too wide but is way too tall (not resizing properly). Bottom one shows the current version of the site.
When these shots were taken, my phone was on iOS 7.1.2. The fix is pretty simple but does require editing the core Genesis files. It can’t be done from the browser (at least, I could not figure out how to do it) so you’ll have to break out your favorite FTP program. If you don’t have one, check out Filezilla.
Connect to your site and browse to:
/wp-content/themes/genesis/lib/structure and edit header.php.
Head down to line 788 and take a look. This is where Genesis creates the HTML code for the background image of the header DIV element, used to display your logo if you are using one. Find and remove the !important parameter.
Save and upload header.php back to your site and check your site on a mobile device. If everything worked, you will be rewarded with a header image that resizes properly (or at least, better than it did). If not, you may need to tweak a bit of CSS.
Here is what the header CSS looks like on the site (for mobile-sized screens):
#header {
/* min-height: 100%; */
height: 90px;
min-width: 100%;
overflow:hidden;
background-size: contain !important;
}
The important part is the background-size: contain !important;. This attribute tells the browser that the background image needs to be resized to completely fit in the DIV container. The !important parameter makes this attribute take president over any other CSS declaration that would change the background size. This is the very reason that, no matter what we did in the @media portion of the CSS file, the header background image would not change; it was declared in the header of the document with the !important attribute.
And there you have it. With a few changes, you too can have a mobile-responsive header image for your site using the Genesis framework and the Focus theme (or one similar to it). Let me know if this information helped you and your site.
Alan, Even though it’s been 8 months since you wrote this it sure helped me out today when I found it. I like using Genesis but had the same problem with another theme and this seemed to at least fix it better. Did you ever find the solution to iOS 7.03?
Hy, thanks for the comment. I haven’t tried this yet, but it’s on my list:
If you look at the source of the Genesis template, the header image is coded as in-line CSS. Because of that, they Style.css file can’t over-rule that in-line styling. No matter what you do to the header image background, it can never change.
So, my idea is to alter the Genesis core code (something that you are not suppose to do since it will revert back as soon as there is an update) to remove that line of code and put the header image CSS into my child theme CSS file.
That way, I can dictate a different file to have as the header image background on mobile devices. Of course, this may not work but it’s worth a try. I will see if I can do a little more testing to see if this solution will work. If so, I’ll update this post and send you an email to let you know. Thanks again for the comment.