My Header Image is different in Browsers

  • I would greatly appreciate some help with this. I’m totally blind. So, I cannot test this issue on my own.

    I’m using the default 2017 theme on a site located at https://www.jonathansimeone.com. I’ve uploaded a custom header image. It appears to be viewing correctly in some browsers. In others, it is showing up differently cropped

    I have switched to SSL and I’ve made sure the URL for the image has an https address. Still, the image loads differently in browsers. Any help that can be provided would be greatly appreciated.

    Jonathan .

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello Jonathan,

    I have tested this in three browsers – Firefox, Chrome, and Safari. The header image presents the same in each one. Unfortunately, when the browser window is sized at a normal 4:3 ratio, the top and bottom of the photo gets cropped off. When a browser window is sized to a more vertical ratio, then the whole photo is presented.

    The problem, I believe, is the sizing of your photo (2000×1819). The Twenty Seventeen theme recommends 2000 by 1200. In short, you’ve got a square peg for a rectangular hole. That extra 600 pixels of height is what is getting cropped out. Can someone assist you with re-cropping and re-sizing the photo? If not, let me know and I’d be happy to do it for you.

    Also, I wanted to note that you will want to choose either to have your title & tagline enabled (Jonathan’s Blog and Podcast: Learn, laugh, and share) or have your URL (jonathansimeone.com) embedded as text in the header photo – but not both. At different screen sizes, they can end up overlapping and it is visually confusing. Either that, or someone could maybe help you with CSS media queries to enable one or the other as appropriate.

    Hello again,

    I just tested out the TwentySeventeen theme and tried to use your photo as the header with the recommended sizing of 2000×1200. Unfortunately, it is still cropping the photo from the center. I’m not sure why.

    This seems to be an ongoing issue for a number of folks using this theme-
    https://www.ads-software.com/search/header+image+intext%3A%22Theme%3A+Twenty+Seventeen%22/?forums=1

    You may wish to request that your question get moved from this general area of “Fixing WordPress” to the more specific support area for the TwentySeventeen theme itself- you may get more answers.
    https://www.ads-software.com/support/theme/twentyseventeen/

    The other option, of course, is to use a different theme, one with a simpler layout for the header image.

    Good luck!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘My Header Image is different in Browsers’ is closed to new replies.