Header Sizing Issues

  • Please be gentle – I’m a beginner, not a developer/coder/designer.

    I’m loving the impression I get of twenty seventeen but am having nightmares with the header.

    The video header on the static home page works fine.
    I uploaded the recommended video size of 2000 x 1200 pixels.
    I also uploaded a static header image at the same size (as recommended).

    My problems are:

    • On every page except the static home page, the header is much less height and therefore crops the header image, which looks terrible.
    • If I upload a static header image that looks right with the lesser height, then it looks ridiculous when it replaces the video header on mobile or a slow connection
    • The site logo shrinks by a large degree on every page except the static home page

    What I would like (in an ideal world):

    • The static header (on every page and when replacing the video header on mobile/slow connections) to be the same size as the video header.
    • The logo also to stay the same size.

    Alternatively:

    • The static header on all pages except static home page to use a different image to that shown when the video header is static (so it looks correct at the different dimensions)
    • The logo not to shrink into obscurity in static headers

    I hope I’ve made sense and I’m hoping someone can help me out.

    (using Safari on MacBook and also iPhone 6s)

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Hi @sarahdfly, Would you be able to link your website?

    Thread Starter sarahdfly

    (@sarahdfly)

    There’s very little to see.
    Ignore actual text and images. I’m just creating a framework to show the trustees for approval before putting in the hours transferring content from the current site.
    https://www.version2.chaffinch.org.uk

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Let’s start with getting the logo the same size.
    If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:

    1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
    2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
    3. (put this code in)

      
.custom-logo-link img {
    max-height: 200px;
}
    4. Save

    Alternatively use your Child Theme style.css file to hold your CSS modifications

    Thread Starter sarahdfly

    (@sarahdfly)

    Thanks. I’m not using a child theme. It’s just a straightforward install of twenty seventeen.
    It’s got a CSS modification section so that makes it easier!

    That’s sorted the logo. Great.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m sorry I couldn’t figure out how to make the header the same size as the Front page on other pages. If someone else wants a try, here’s my attempt: https://pastebin.com/Bzy5EiRw

    Thread Starter sarahdfly

    (@sarahdfly)

    Andrew, thanks for putting in some work on this and you’ve sorted my logo issue which is great.
    I admit to being a little confused as to why the theme requests a 2000 x 1200 header image but then doesn’t use that size for the majority of headers, but I’m sure the theme developers had their reasons! Perhaps if I make my static image an image of two ‘halves’ so it makes sense both as a whole and with only the top half visible…hmm, will have to play around…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Maybe it is better that there is another hero image option for the header, to reduce unnecessary bandwidth use and help you display the correct portion of the image. This has been raised before.

    Where in the dashboard is the option to upload a header image in the theme? Sorry I haven’t installed it myself but I can potentially help with adding a new image field.

    Thread Starter sarahdfly

    (@sarahdfly)

    @anevins, I agree. I think having a separate option would be a better (and cleaner) solution.

    Uploading the header image is in Appearance – Header – Header Media. That’s the location where both the header video and the static image are uploaded.
    The static image uploaded there would still need to exist as it replaces the video on mobile devices and slow connections.
    But perhaps an alternative could be defined for the other pages?
    Guessing I’d need to set up a child theme…

    I was wondering if anybody has a solution yet for the header-problem.
    Tried several things (also the css-trick from other topic) but no succes.

    I want to have a good header on all pages, not only the mainpaige. The css code works a bit,but makes the image ugly.

    If there is another way,please share.

    Addon:
    On my Ipad the header is not cropped when I use it upright. Horizontal it does.

    The header image being so large on the main page and so thin on all subpages (i.e. actual blog posts) is bizarre, without a clean way to deal with this.

    Do you think WordPress will update the theme to solve this or should I figure out some other plan?

    Thread Starter sarahdfly

    (@sarahdfly)

    @astroknot I don’t actually mind the difference as I think it’s nice to have a large image when someone first accesses the site, but then the smaller header doesn’t detract from the content on the other pages. However, there should be an option to choose different images because, at the moment, the small, thin headers turn out to be a weird crop of the large image which looks ridiculous.
    I’m playing with the code but having difficulty adding a second header in my child theme. Something in the main theme seems to be over-riding my changes but I can’t locate what it is.

    I agree – just having the option for main header image & smaller header image should be clear. I’ve tried making the main header something that looks good cropped like that but it’s really hard! Needs to be an option in the main theme settings…. I don’t trust myself enough to figure out parent/child pages yet ??

    I just posted a hack: See https://www.ads-software.com/support/topic/static-page-header-on-all-other-pages/#post-8698710

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Header Sizing Issues’ is closed to new replies.