lukepenketh

FIXED:

I reset the header.php to normal.

Add this code to your custom CSS.
First part makes the header media crop on mobile more central, second part gets rid of the Header media on Posts and Pages Only, replacing it with the featured image.

/*Sort Header Displayon mobile*/
/*Part 1 – Make header crop central*/
@media screen and (max-width: 480px) {

.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
.site-branding {
position: absolute;
}
{
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;

}
}
/*part 2 – remove featured image duplicate*/
.site-branding {
display:none;
}

Fixed it – much simpler too.
Just add this code to the custom CSS:

/*Sort Header Displayon mobile*/
/*Part 1 – Make header crop central*/
@media screen and (max-width: 480px) {

.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
.site-branding {
position: absolute;
}
{
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;

}
}
/*part 2 – remove featured image duplicate*/
.site-branding {
display:none;
}

I have used this code to replace the header image with the featured image for individual pages:But so far I’ve found that it only works on the desktop site – on mobile the featured image displays twice for some reason. I’ve opened a support thread to fix this, so hopefully it get’s sorted soon
Replace the masthead header code in the header.php with this:

<header id=”masthead” class=”site-header” role=”banner”>
<?php if ( has_post_thumbnail() && ( is_single() || ( is_home() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) ) : ?>
<span class=”has-header-image twentyseventeen-front-page home”>
<div id=”page-header” class=”custom-header”>
<div id=”custom-header-media” class=”custom-header-media” >
<div id=”wp-custom-header” class=”wp-custom-header”>
<?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
$page_for_posts = get_option( ‘page_for_posts’ );
echo get_the_post_thumbnail( $page_for_posts );
} else {
the_post_thumbnail( ‘twentyseventeen-featured-image’ );
} ?>
</div>
</div>
<div class=”site-branding”>
<div class=”wrap”>
<div class=”site-branding-text”>
<h1 class=”site-title”>
<?php if ( is_home() && ! twentyseventeen_is_frontpage() ) {
$page_for_posts = get_option( ‘page_for_posts’ );
echo get_the_title( $page_for_posts );
} else {
the_title();;
} ?>
</h1>
</div>
</div>
</div>
<?php echo twentyseventeen_get_svg( array( ‘icon’ => ‘arrow-right’ ) ); ?><span class=”screen-reader-text”><?php _e( ‘Scroll down to content’, ‘twentyseventeen’ ); ?></span>
</div>
</span>
<?php else : get_template_part( ‘template-parts/header/header’, ‘image’ ); endif;?>

<?php if ( has_nav_menu( ‘top’ ) ) : ?>
<div class=”navigation-top”>
<div class=”wrap”>
<?php get_template_part( ‘template-parts/navigation/navigation’, ‘top’ ); ?>
</div><!– .wrap –>
</div><!– .navigation-top –>
<?php endif; ?>

Hannah, you’re a star.

It was set to text. I changed it to portrait image and voila!

Thanks!