Agency 2 Custom Header Not Shrinking On iPhone

Community Forums Forums Design Tips and Tricks Agency 2 Custom Header Not Shrinking On iPhone

This topic is: not resolved

This topic contains 10 replies, has 4 voices, and was last updated by  jonburr 1 year, 6 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #8079

    docmas
    Participant
    Post count: 40

    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

    #8081

    docmas
    Participant
    Post count: 40

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

    #8082

    Susan
    Moderator
    Post count: 9255

    Have you looked at the Genesis Responsive Header?

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


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #8086

    docmas
    Participant
    Post count: 40

    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

    #8087

    docmas
    Participant
    Post count: 40

    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

    #8126

    Susan
    Moderator
    Post count: 9255

    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.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #8133

    lostintime
    Participant
    Post count: 55

    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.

    #8148

    docmas
    Participant
    Post count: 40

    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

    #8153

    Susan
    Moderator
    Post count: 9255

    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.


    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #8166

    lostintime
    Participant
    Post count: 55

    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.

    #32801

    jonburr
    Participant
    Post count: 9

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.