How do I change the height of the header image (specified in the Header Media section) in the Twenty Seventeen Theme?
Specifically I want to change it on the home page because here it fills up nearly the entire page. I want it to be much shorter. The way it appears on other pages such as the built-in About page has a good height so if I could mimic that on the home page I would be satisfied. Although knowing how to do precise control would be great.
I found (part) of the css code that controls the height in wp-content/themes/twentyseventeen/style.css
.
There is code that applies when the admin bar is not visible (typical anonymous user) currently at line 3629
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 1200px;
height: 100vh;
max-height: 100%;
overflow: hidden;
}
And code that applies when the admin bar is visible (e.g. you are logged in) currently at line 3646
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(100vh - 32px);
}
And then code that applies on mobile currently at line 1638:
.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 {
display: table;
height: 300px;
height: 75vh;
width: 100%;
}
By copying these three sections of css into my child theme’s style.css and modifying the height
attribute I was able to tweak the height for the header image on the home page. I set the height to 30vh
, calc(30vh - 32px)
, and 30vh
respectively in each section. I left the first height: 1200px
alone.
Note the height element is set at 100vh
which sizes the height relative to the viewport height. So 100vh is 100% of the viewport while 50vh is 50% of the viewport.
One odd thing is that on the home page the zoom and position of the header image is different than on other pages.
Not sure if this is the best way. I’m open to better options but so far it’s working at a basic level.