Responsive header (Twenty Seventeen Free Theme)

• 

  alpacox · Member · Apr 29, 2017 at 6:15 am

  • Copy link
  • Add topic to favorites

  Hi

  My header image isn’t responsive – can anyone suggest what to put in the CSS to override the themes default? I have tried width:100% but didn’t work…

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

• 

  thesacredpath · Member · May 3, 2017 at 6:58 pm

  • Copy link

  Hi, I’m looking into this. The Twenty Seventeen header area is designed for photographic images that are not sensitive to cropping and resizing, and so far this has been more than challenging. One of our developers and I are putting our heads together to see what we can do. I’ll get back to you just as soon as we come up with something.

• 

  thesacredpath · Member · May 3, 2017 at 8:31 pm

  • Copy link

  Hi again, with two heads, our developer’s and mine, we’ve managed to do this. Add this to the very bottom of your custom CSS.

  .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    object-fit: initial;
    width: 100%;
    height: auto;
    display: block;
    min-width: initial;
    min-height: initial;
  }
  .custom-header-media {
    height: 65vw !important;
  }
  @media screen and (max-width: 767px) {
  	.custom-header-media {
  		height: 50vw !important;
  	}
  	.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
  		height: 50vw;
  	}
  	.logged-in .wp-custom-header img {
  		margin-top: 32px;
  	}
  }

  Play with things and let me know if you find any issues, and make sure and view different pages and also on phone and tablet.

• 

  alpacox · Member · May 4, 2017 at 6:30 am

  • Copy link

  Hiya thanks so much – that worked :-) Superstars!! Thx

• 

  alpacox · Member · May 4, 2017 at 10:55 am

  • Copy link

  Hi again! So the home page looks good but it has created a grey banner on the top of all my other pages and lost the small header image on top of those pages?! Any ideas?

• 

  thesacredpath · Member · May 5, 2017 at 7:05 pm

  • Copy link

  It looks like you have the same image on the other pages right now. Were you wanting something different on the other pages, or did you want to mimic what we did on the main page with the same image?

• 

  alpacox · Member · May 6, 2017 at 6:46 am

  • Copy link

  Hiya yep the same image is fine thanks.

• 

  dcoleonline · Staff · May 10, 2017 at 10:35 pm

  • Copy link

  Hi there,

  So the home page looks good but it has created a grey banner on the top of all my other pages and lost the small header image on top of those pages?! Any ideas?

  I’m not seeing this happening today when I check the site. Did you still need help with this? If so, could you upload a screenshot of the issue to your media library so we can take a look?

  Also, regarding having images that scale well with the browser, the header for Twenty Seventeen really isn’t a good fit for that. Have you seen/tried the Karuna theme? It uses a large header image that doesn’t get cropped when resizing:

  https://karunademo.wordpress.com

• 

  alpacox · Member · May 16, 2017 at 12:09 pm

  • Copy link

  Hi this happened when I amended the CSS with the above suggested by thesacredpath – I had to remove it as it was worse than before – still not working as per my original request :-(

• 

  alpacox · Member · May 16, 2017 at 12:51 pm

  • Copy link

  Just changed to Karuna Theme – seems to work much better thanks! :-)

• 

  dcoleonline · Staff · May 16, 2017 at 3:00 pm

  • Copy link

  Great! If you need any help with Karuna, feel free to start a new thread, and we’ll assist you with it there.