Community Forums › Forums › Archived Forums › Design Tips and Tricks › Agency 2 Custom Header Not Shrinking On iPhone
Tagged: agency mobile optimization
- This topic has 10 replies, 4 voices, and was last updated 11 years ago by jonburr.
-
AuthorPosts
-
December 28, 2012 at 9:26 pm #8079docmasMember
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
December 28, 2012 at 9:29 pm #8081docmasMemberActually, more like the left-most third of the banner shows on iPhone if that helps figure it out.
December 28, 2012 at 9:34 pm #8082SusanModeratorHave you looked at the Genesis Responsive Header?
http://designsbynickthegeek.com/plugins/genesis-responsive-header
December 28, 2012 at 10:23 pm #8086docmasMemberSusan,
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
December 28, 2012 at 10:34 pm #8087docmasMemberDownloaded 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
December 29, 2012 at 8:30 am #8126SusanModeratorThe 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.
December 29, 2012 at 9:10 am #8133lostintimeMemberHi 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.
December 29, 2012 at 10:08 am #8148docmasMemberThanks 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.
Adam
December 29, 2012 at 10:21 am #8153SusanModeratorI 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.
December 29, 2012 at 10:47 am #8166lostintimeMemberYes, 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.
April 3, 2013 at 6:41 am #32801jonburrMemberYou 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.