Title: Mobile Responsive Header
Last modified: October 23, 2019

---

# Mobile Responsive Header

 *  [appleisle](https://wordpress.org/support/users/appleisle/)
 * (@appleisle)
 * [6 years, 7 months ago](https://wordpress.org/support/topic/mobile-responsive-header/)
 * CSS fix to make header(Media) image (2000 px X 1200px) responsive in 2017 Theme.
   
   Reference: 1yr 6months ago – [https://wordpress.org/support/topic/need-a-responsive-header-image/](https://wordpress.org/support/topic/need-a-responsive-header-image/)
 * CSS code that works on std Twenty Seventeen Layout: – courtesy of glassonlypros1
   —————————————————————————–
   [@media](https://wordpress.org/support/users/media/) screen and (max-width: 450px){
 * .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 { 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; } }
 * .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
   height: 870px; }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   768px) {
    .custom-header, .has-header-image.twentyseventeen-front-page .custom-
   header { height: 400px; } }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   480px) {
    .custom-header, .has-header-image.twentyseventeen-front-page .custom-
   header { height: 200px; } } .custom-header-media:before { display: none; } ——————————————————————————-**
   NOTE: ** As I had to search inumerable posts to find the correct code, I thought
   it important to make this post so it is time relevant ass of October 2019.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-responsive-header%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Mobile Responsive Header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyseventeen/4.1/screenshot.
   png)
 * Twenty Seventeen
 * [Support Threads](https://wordpress.org/support/theme/twentyseventeen/)
 * [Active Topics](https://wordpress.org/support/theme/twentyseventeen/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentyseventeen/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentyseventeen/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [appleisle](https://wordpress.org/support/users/appleisle/)
 * Last activity: [6 years, 7 months ago](https://wordpress.org/support/topic/mobile-responsive-header/)
 * Status: not resolved