Make front page header the same as on other pages

What would you like to happen when the video is shown on the front page?

@anevins.
I am also interested on this topic. In my case, I don’t like to use video as header image. Thank You!

If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:

1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
3. (put this code in)

   
   @media screen and (min-width: 48em) {
       .twentyseventeen-front-page.has-header-image .custom-header-media, 
       .home.blog.has-header-image .custom-header-media {
           min-height: 165px;
           height: auto;
       }
   
       .twentyseventeen-front-page.has-header-video .custom-header-media {
           height: 100vh;
       }
   }
   

4. Save

Alternatively use your Child Theme style.css file to hold your CSS modifications

I also don’t like to use video as header image.
I tried the above code but still the behavoiur is different than on non-front page pages. The header image on the front page is still shown bigger. I am using a header image with size 1600x170px.

• This reply was modified 7 years, 11 months ago by schmid333.

You’ll have to show us your website.

@anevins, Thanks. Image height is cropped OK which I can adjust but it requires site title & tagline (site-branding) adjustment – to bring just like in blog pages. How to adjust that? Thank you

Here’s a link to my testsite where you can see how it looks right now: https://testpage.com.w0156ab0.kasserver.com/

• This reply was modified 7 years, 11 months ago by schmid333.

@schmid333, Thank you. I got similar results like yours. In your site, when I
varied the media height up to 450px (line 58 your style sheet) the branding text (title & tagline) looks better – stays lower bottom. I don’t get that in my test site. Otherwise it works!

To sum it up, there are still issues:
The branding text (title & tagline) does not fit to the new size of the header.
And my image gets scaled to higher dimensions so that it is not displayed sharp.

Does someone have any ideas how to solve it? Thank you.

I miscalculated the minimum height. It should be ‘237px’ not ‘165px’. So try this instead:

@media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media, 
    .home.blog.has-header-image .custom-header-media {
        min-height: 237px;
        height: auto;
    }

    .twentyseventeen-front-page.has-header-video .custom-header-media {
        height: 100vh;
    }
}

@anevins, Thanks. This seems to work better except I would have liked to keep the site branding text at the lower bottom. Any help appreciated!

I’m sorry I don’t know what you mean. Can you update your testing environment with the code and let me
know which text you’re referring to?

Edit: Wait, @pauthake015, I thought you were the original poster. Please open a new thread to get help with your issue: https://www.ads-software.com/support/forum/themes-and-templates/#new-post

• This reply was modified 7 years, 11 months ago by Andrew Nevins.

@anevins, Thank you & Happy New Year! No worries I plan to spend some time learning all the components of this theme. For now I am fine.