Help with Custom Header (doesn't work on mobile devices)

  • Unknown's avatar
    cindylu633 · Member ·

    Someone from the online help suggested I post here to see if someone could help me figure out how to make the custom header on my site work on all devices. Right now, it only displays correctly on a computer screen. With a smaller tablet or phone, most of it is cut off (on my phone for example, it only shows the middle portion of the header). I am not super technical so hopefully it isn’t too complicated! If it matters, I am using the gateway theme. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Hi Condy, it looks like there’s two problems here:

    1. Your header image is centred so mobile viewers don’t get the full effect.
    2. It’s not the right proportions so some tablet viewers (between 800 and about 1060px wide) get the bottom of the image cut off.

    The Gateway theme page states:

    Recommended header size: 2560 pixels wide by 640 pixels high.

    However the demo site uses one that’s 2000 by 1142px. Yours is as wide as suggested but would need to be at least 2560 by 900px in order not to get cut off on some tablets in portrait orientation. I think this might just be an error on the theme page.

    If you can do so, try editing the image and making it taller. Once the new version is uploaded to your media library we can work on centring it on the page so that it looks acceptable on as many devices as possible using CSS.

    An example would be adding this to the CSS section of the customiser:

    @media only screen and (max-width: 640px) {
  .header-bg {
    background-position: left;
  }
}

    It’s not perfect but it’s a pretty good compromise for displaying a wide image on a narrow screen.

  • Unknown's avatar
    cindylu633 · Member ·

    Thank you! Until I can get the header issue sorted out, this helps a lot :-)

  • Unknown's avatar
    hallluke · Member ·

    You’re welcome, and sorry for mistyping your name, Cindy!

    Add this code in below what I suggested last time. It will change the background colour so the difference is not too obvious. It should tide you over until you can get the header image edited to be taller:

    .header-bg {
	background-color: #a6a6a6;
}
  • Unknown's avatar
    cindylu633 · Member ·

    Will do. Thanks again. And no worries about the name – I type it wrong myself all the time :-)

  • The topic ‘Help with Custom Header (doesn't work on mobile devices)’ is closed to new replies.