How to remove header image everywhere except main home page?

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; ?>

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;
}

Hi @lukepenketh,

I pasted your Custom Code into the Customiser but my site is still displaying truncated header images on Pages and Posts.

Can I trouble you to have a looksee:
https://www.taxattorneynearme.us/blog-post-1/ ?

It looks like for the Theme, the header height is different for Pages and Posts. How can they be made to be the same?

Ideally, they should be the same as the Frontpage, which I believe your Custom Code seeks to achieve. Correct?

Many Thanks,
Christie

• This reply was modified 7 years, 8 months ago by christieloh.
• This reply was modified 7 years, 8 months ago by christieloh.
• This reply was modified 7 years, 8 months ago by christieloh.