Header image issues on multiple devices

• 

  eatyler25 · Member · Nov 4, 2015 at 1:06 am

  • Copy link
  • Add topic to favorites

  Hey everyone –

  I have created a parish website for my hometown (stalphonsus-stjoseph.org) and I’m having issues with the header image.

  The theme I am using is called Hemingway Rewritten, and the resolution of my header image is 1280 × 426 pixels. On my Mac 15in screen the image shows fine. On my iPhone and iPad or 23in wide screen monitor the image cuts off making the site look bad. I have been struggling with this issue for a few days now trying some css modification, and I dont seem to be getting anywhere. I did notice on my iPhone that if I scroll to the bottom I can click ‘view mobile site’ and that makes it look good, but I’m not sure if that will stick if someone searches for my site.

  Any help would be wonderful…

  eatyler25

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

• 

  eatyler25 · Member · Nov 4, 2015 at 1:09 am

  • Copy link

  http://www.responsinator.com/?url=http://stalphonsus-stjoseph.org

  I think the link above will show what I am talking about for mobile devices at least, but same concept for my widescreen monitor.

• 

  nizamilputra · Member · Nov 4, 2015 at 6:14 am

  • Copy link

  Sorry I can’t see your website. Please make it public so the volunteer can help you.

• 

  thesacredpath · Member · Nov 4, 2015 at 7:56 am

  • Copy link

  @eatyler25, due to the way the header image is done on Hemingway Rewritten, I don’t know that there is much we can do other than to change the background size for the image from cover to contain. You can give the following a try and see what you think.

  .site-header-image {
      background-size: contain;
  }

  The other suggestion, since Hemingway Rewritten is a responsive width theme that adjusts to add screen/window sizes, would be to go to Appearance > Mobile and disable the mobile theme. This theme simply doesn’t work well with header images like you are using.

• 

  eatyler25 · Member · Nov 4, 2015 at 12:37 pm

  • Copy link

  @nizamilputra –

  I have made the site public, so you should be able to view it.

  @thesacredpath –

  I have updated my css to include you suggested code:

  I do not mind the look, it obviously not exactly what I wanted, but it might be the best I can have for this situation.

  I know I have tried turning off the mobile theme, and it didn’t seem to do anything? I turn it off and navigate to my site from my mobile phone, and I dont see a different in the site with the setting turned on or off….am I missing something?

  eatyler25

• 

  thesacredpath · Member · Nov 4, 2015 at 7:11 pm

  • Copy link

  With the mobile theme turned off, it may be that you will have to clear your mobile browser cache. Phones rely pretty heavily on caching to lessen bandwidth usage. I took a look at Appearance > Mobile and see the mobile site still active for your site.

• 

  eatyler25 · Member · Nov 4, 2015 at 10:56 pm

  • Copy link

  @thesacredpath –

  I have cleared my mobile cache, as well as turned off the mobile theme.

  I think this is the best I can do in the situation I am in.

  I am starting to make updates now.

  Thank you for your assistance.

  eatyler25

• 

  thesacredpath · Member · Nov 5, 2015 at 5:50 am

  • Copy link

  @eatyler25, you are welcome and let us know if you have additional questions.