How do I change the header image height in Twenty Seventeen?

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.

Related Posts:

  1. How to delete default themes
  2. Howto keep header image when changing theme
  3. Whitespace between logo and site title in Twenty Twenty-Two
  4. how to add version of style.css in wordpress
  5. What is the role and history of the $content_width global variable?
  6. Override parent theme translation on child theme
  7. “Unexpected error” on update requests
  8. How to prevent plugin, theme installation failures on WordPress?
  9. Is it possible to access Gutenbergs reusable blocks in CPT block templates?
  10. A minimalistic admin theme for a WP 3 install
  11. Error message “The page you are looking for is temporarily unavailable.” after editing a file [closed]
  12. Adding goodies to themes
  13. Child-theme breaks site
  14. A hook that runs only when the theme is previewed
  15. WordPress theme with multiple color schemes
  16. How can I have case-sensitive theme directory names when installed with Composer?
  17. how to remove the unwanted banner in wordpress static page [closed]
  18. Protect changes made to the theme when updating
  19. When can changing a theme damage a website?
  20. My scripts-bundle.js file is getting sent to the browser as a stylesheet css file. Help!
  21. variables in translatable text
  22. Load a different theme for IE less than 9
  23. Theme Check reporting an incorrect theme slug and text domain
  24. Style the archives/category sidebar widget via theme
  25. I get the following message The uploaded file could not be moved to /home/reascom/public_html/wp-content/uploads/2012/07 [closed]
  26. WordPress themes that are browser tested and maintained?
  27. Custom CSS doesn’t work in edit mode
  28. Remove transparancy in Sydney theme’s headerimage
  29. Port existing Bootstrap site to WordPress?
  30. stylesheet is not readable error after installation
  31. Customizing page content layout
  32. Updating / Transferring site
  33. Putting two themes together to create a complete site
  34. How does WP generate html?
  35. How to dynamically change theme’s slogan from admin?
  36. Using WordPress Multisite to manage multiple projects?
  37. What’s a good way to unenqueue all scripts for a single template page?
  38. Icons not showing [closed]
  39. Adding Sidebars in WordPress Theme
  40. Error 404 for JQuery import “jquery-1.10.2.min.map”
  41. Passing dynamic options from backend to frontend
  42. Using the same database on another Subdomain
  43. WP HTML Templates – Any way to get bloginfo() or the path to the theme folder?
  44. Theme javascript/css 404
  45. The style.css stylesheet doesn’t contain a valid theme header. what should I do, please?
  46. How to add more default colors?
  47. On a Https site, Css and Js Url are back to http after redirect the site
  48. Changing URL of scripts, scripts outside theme folder?
  49. Theme folder doesnt exist
  50. WordPress activate theme error $pagenow
  51. Increase content area width in TwentyFourteen [closed]
  52. How to use only scripts from new theme?
  53. Undefined variable error in theme option after updating theme [closed]
  54. Conditional config WP_HOME/WP_SITEURL does not update bloginfo(‘template_url’)?
  55. Send data to Editor before saving the post
  56. Comments not displaying after changing theme
  57. Theme Translation?
  58. Two column layout in WordPress?
  59. WordPress Theme Breaking on Migration to Live Site [closed]
  60. List of categories instead of dropdown menu selector in admin options
  61. WordPress doesn’t recognise created theme
  62. Looking for a theme to show unread/updated posts since last visit or like that
  63. How can I show some standard html code across any theme I install?
  64. Losing theme customization when switching from a theme to a child
  65. Problem of not changing the front and bottom of the Woodmart template by activating the really simple ssl pro plugin in WordPress
  66. Please help me clear my confusions about WordPress
  67. Why does an ad page open when I browse my websites’s wp-admin page?
  68. Get the name WordPress default theme in the core
  69. What is the correct way to set up a staging server and use github for version control?
  70. How do I use the default style for widget?
  71. WordPress fails to embed video URL on specific theme
  72. Unable to set social icons using Advance Portfolio Theme
  73. How to add extra custom social icons to page with same style?
  74. How can I theme or style the lost password page without a plugin?
  75. Child theme menu not appearing in Twenty Seventeen
  76. how make wp include urls as https?
  77. how to costume title single page
  78. use a Thumbnail size in post
  79. Why does WordPress Editor Only Use Half the Box?
  80. Installing Theme from uploaded file. Not uploaded theme?
  81. Where can I find a theme that has a big banner
  82. WordPress theme not updating in Other browsers
  83. WP-CLI wp theme install url PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
  84. Site broken after deleting inactive themes [closed]
  85. Can i add wordpress editor to my custom theme option? [closed]
  86. Featured images are cropped on index and post page
  87. Change theme’s thumbnail to cropped WP featured image
  88. Best way to include pagination in a theme [closed]
  89. What happens to bespoke page template references on theme change?
  90. Stylesheet not being loaded? [closed]
  91. is it possible to create a website with wordpress with these requirements without coading?
  92. Theme making direct ajax calls to theme folder
  93. How to change the standard width of a page
  94. Where can I decide the number of posts to display on the blog index page?
  95. I need to disable responsive feature of a theme called Meet GavernWP [closed]
  96. how to add dynamic footer credit in Greatmag theme [closed]
  97. Twenty Fifteen Premium Theme [closed]
  98. Can i Remove copyright text wordpress.org theme
  99. Help with Divi logo not appearing for 10s
  100. How to clone a theme template from within WordPress? [closed]

Leave a Comment