need add’tl css code for responsive header image

Try this to adjust logo image size for mobile view.

@media only screen and (max-width: 55.063em) {
	.custom-logo-link  { max-width: 250px; display: block; margin: 16px 16px -16px; }
	.site-title { font-size: 18px; margin: 0 0 0 16px; }
 }

Please note that max-width: 55.063em is the same as what theme uses, it must be. The .site-title is additional, I put it in to make font size smaller so that it don’t overpower the logo. Adjust margin, font-size as you see fit.

To get different logo for subpages (pages other than front home page), just make use of :not() to target “not home” page, and then display-none the default logo image, like this

:not(.home) .custom-logo-link img { display: none; }

then add in the image using :before CSS pseudo element to the link container, like this

:not(.home) .custom-logo-link:before {/***add in the image url as content along with width and height ***/}

Do that 2 times, one for small screen and one for big screen, using the same width (value/unit) of @media query that theme uses.

Your code for improving the home page logo is brilliant. I have applied it and it is such an improvement to the display of the home page image. Thank you!

With regards to the header media image on the interior pages and your instructions — are those files “logo” files or are they image files? Here is an example of how the home page family photo loads on the interior pages (weird automatic cropping, not idea). That photo is what I would like to replace and control — at present each interior page automatically uses and crops the the image that I have placed in the home page header media section. Thank you!

I misunderstood your 2nd question. You refered to header image, I mistook it as logo image.

For header image, usually theme will use page/post featured image as header image. Did you try assigning featured image for each page? This is how most themes work. Also check theme option thoroughly.

If theme doesn’t have that option, and assigning featured image doesn’t set header image, we can use CSS to fix it.

But before we get to it, please note that this theme uses header image as background to cover the header area. The reason the image looks kind of okay in front page and not as okay in other pages (get cropped) because there are more text in this area of front page. Using different image for other pages can fix this but it will never be perfect, because the area’s height is set by the amount of text and vertical padding, background image will get displayed (exposed) based on this height. So it will always get cropped somehow.

This code below is a simple fix to add more vertical padding to header area (for pages other than front page), this will expose more background image (get cropped less). So try this code first, it doesn’t require different image.

body:not(.home) .hero { padding-top:300px; padding-bottom: 20px; }

I believe the above code will fix the problem already but if it doesn’t satisfy you, use this code below.

body:not(.home) .site-header { 
	background-image: url(https://dummyimage.com/1000x250/ff0000/0011ff.png)!important; 
}

@media only screen and (min-width: 55.063em) { 
	body:not(.home) .site-header {
		background-image: url(https://dummyimage.com/2000x500/ff0000/0011ff.png)!important; 
	}
}

Just replace the image url. First one is for small screen, the second one is for big screen.

As a sidenote, the :not is not well supported yet when used like that, but it works tested with latest Firefox, Chrome, in Windows 10.