Tagged: agency mobile optimization
December 28, 2012 at 9:26 pm #8079
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,
AdamDecember 28, 2012 at 9:29 pm #8081
Actually, 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 #8082
Have you looked at the Genesis Responsive Header?
December 28, 2012 at 10:23 pm #8086
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?
AdamDecember 28, 2012 at 10:34 pm #8087
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.
AdamDecember 29, 2012 at 8:30 am #8126
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.
December 29, 2012 at 9:10 am #8133
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.December 29, 2012 at 10:08 am #8148
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.
AdamDecember 29, 2012 at 10:21 am #8153December 29, 2012 at 10:47 am #8166
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.April 3, 2013 at 6:41 am #32801
You can also add the following to your css:
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.
You must be logged in to reply to this topic.