Header Image Responsiveness

i really like this theme and for the most part it works well for us, but i have a problem with the responsiveness of the header image when viewed via smaller screnes (iphone, ipad, etc.).

earlier discussions mentioned an update that would help with this, but i’m using the latest version (1.03). when i look at our site with my iphone or ipad, the visible image is a small portion of the actual photo, i.e. the image is not reducing to fit the viewing medium.

i used the firefox responsive design view tool, and the image responds well to size reduction until right at a width of 1024px, and then the image jumps up to full size.

is there some coding i could change/add/screw up that would help?

i also notice that my 2 widgets do not show up on the iphone, but they do show up on the ipad. is that weird?

and one more question: is there a way to make the navigation banner narrower vertically? that’s merely my aesthetic and not a deal breaker.

i am not very adept at coding, but with a little help i can generally figure things without too much damage, so i thank you in advance or any advice you can give.

site url = http://bark-loud.com


  1. This is the best we can do at the moment with the current limitations on iPhones. The thing is that the header image is designed to the full height of your viewport. Obviously, a full height image on an iPhone won’t allow the display of anything close to the full width of the image. That’s why you get only the middle portion of the image. In some cases that looks nice, in your case I must agree that it’s not that cool. I’ll have a look later at it, the only solution would be to just disregard the full height thing on <1024px.

  2. The widgets not displaying on iPhone is not weird. They are meant to be hidden on < 991px.

  3. You can add this code to a custom CSS plugin to make de bar narrower:

.main-navigation li {
    padding-top: 20px;
    padding-bottom: 20px;

Thanks for your help. I’m probably not using the site as it’s intended (not using all the bells & whistles), but for us it looks really cool on the desktop and I like it a lot. It’s the closest design I’ve been able to find that, for the most part, does what I want and looks cool. The other sites I’ve seen using your theme (with the bells & whistles) look really nice. eventually, as I have more to add to our site, those will be cool options to have.

I would be fine with disregarding the banner image height at <1024 for smaller viewports and if there’s a code I can tweak for that, please let me know and I’ll try it.

and thanks for the banner css… I will try it.