Agency 2 Custom Header Not Shrinking On iPhone

[docmas]

Setup Agency 2 website with custom-sized custom header, 960 x 175.  Looks fine on laptop, fine on iPad, but on iPhone, only half of the header is visible, half is cutoff.

Is there some other setting that needs adjusting?  Theme is supposed to be mobile responsive.

Thanks for your thoughts,

Adam

http://thepassiondoctor.com

[docmas]

Actually, more like the left-most third of the banner shows on iPhone if that helps figure it out.

[Susan]

Have you looked at the Genesis Responsive Header?

http://designsbynickthegeek.com/plugins/genesis-responsive-header

[docmas]

Susan,

Thanks, I'll take a look at it, but my understanding is that Agency 2 is mobile responsive and should be doing that on its own.  Is that not true?

 

Adam

[docmas]

Downloaded and will try (though the latest version didn't have a link on that page, so might be an old beta, hopefully won't crash).

Confused though, as my iPhone 4s has screen resolution of 960 x 640, so would think that the header would fit in it without even needing to shrink or crop.  Guess I need to read up more on this, though was hoping not to need to with the Agency theme.

 

Adam

[Susan]

The Agency theme is responsive, but depending on manipulations made to the header (did you change the size, I can't recall?) , it could render the header itself unresponsive (at least that's my understanding).

I viewed your site on both an iPhone and iPad last night - in portrait view on the iPad, the header cut off, too (just not as much as it appeared cut-off on the iPhone.

[lostintime]

Hi there Adam,

Susan is right there. While the theme itself is responsive, the header image you are using is not. It won't scale automagically. That explains why it get cuts off on the side on smaller displays. (Out of the box, Agency does not have a header image, if I'm not mistaken. – or if it does, it's rather tiny.)

In order to display a different (less wide)  image for each viewport you would have to define these in the corresponding media queries in your theme's style.css.

[docmas]

Thanks for all of your feedback, inserted Genesis Responsive Header, that seems to do the trick.  Although, I'm using a higher than normal custom header (175px high) and while entire header shows up now on iPhone, seems disproportionate(not as high as on laptop) compared to the rest of the blog page, which IS being responsive.

Is that just me or can anyone else notice that?  Either way, it's a big improvement.

http://thepassiondoctor.com

 

Adam

[Susan]

I just viewed it on the iphone, and it has "shrunk" to fit the screen, which is the desired outcome for being responsive, but I see what you are talking about. Still, it is an improvement on how it looked last night.

[lostintime]

Yes, I can see it too Adam. Perhaps you should talk to the plugin developer. Nick's around here a lot so the chances are good that he'll be able to help you out.

[jonburr]

You can also add the following to your css:

#header {

background-size: 100% auto;

}

This will resize your one header. The responsive header plugin is good, too, but necessitates the making of 4 versions of the header.

[Author]

Posts