Title: Mobile Header Image Sizing
Last modified: November 8, 2017

---

# Mobile Header Image Sizing

 *  [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/)
 * Hello there,
 * I have been having some issues modifying my header image for mobile use. I have
   dug through this forum and tried every code I could find in my CSS editor. I 
   am able to see the image resized, but the pesky grey space appears below the 
   image and above the title/menu. I have then tried the offered solutions to that
   problem, but all I’ve managed to do is make things look worse.
 * Are there any updated CSS edits I can make that will eliminate the grey space
   and make my header image appear the correct size on mobile? Otherwise I’m just
   going to accept defeat on this one. My website is marsfallpodcast.com
 * Thank you so much!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-header-image-sizing%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 12 replies - 1 through 12 (of 12 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9663632)
 * Did you try my second post in this thread (I’m linking directly to it): [https://wordpress.org/support/topic/mobile-header-image-doesnt-resizeunresponsive/#post-8565037](https://wordpress.org/support/topic/mobile-header-image-doesnt-resizeunresponsive/#post-8565037)
 * It sounds like you did the first one.
 *  Thread Starter [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9664476)
 * Hi Andrew,
 * Thanks for the response! I did try the second one. I just tried it again to make
   sure, too. I’ve attached a photo of what it does. The Title moves off to the 
   right hand side of the Header Photo. This appears both on my actual mobile device(
   iPhone) and on the mobile preview in the editor.
 * Any idea how to fix that? I guess what I’m wanting is a way to keep the Title,
   but just eliminate the grey space. The Title can be in grey space (it doesn’t
   need to lay over the Header), but I just don’t want the empty grey space.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9664495)
 * I see the issue. I’m not sure why it does that, I’ll look into it.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9664503)
 * Try this instead:
 *     ```
       @media screen and (max-width: 480px) {
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .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: block;   
               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;
           }
   
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .custom-header-media,
           .has-header-image .custom-header-media img, 
           .has-header-video .custom-header-media video, 
           .has-header-video .custom-header-media iframe {
               position: static;
           }
   
           .custom-header-media:before {
               background: none;
           }
   
           body.has-header-image .site-description, 
           body.has-header-video .site-description {
               color: #222;
               opacity: 1;
           }
   
           .site-branding .wrap {
               padding: 0 1em;
           }
       }
       ```
   
 * It’s important to note that this changes the design of the title so that it is
   no longer on top of the image. I tried explaining in the other thread that you
   cannot have a solution with the original design (with the title on top of the
   image) or there will be empty space beneath the image. This is what you’re seeing
   as “grey space”. The only other alternative is to change the theme design as 
   per this solution.
 *  Thread Starter [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9664659)
 * So I placed that code into the CSS editor and it did succeed in getting the title
   in the right place.
 * Unfortunately, now the header image is massive. It looks fine in the preview 
   online but on my iPhone it’s crazy big.
 * I left the code in place for now, so if you go check you should see what I mean.
 * Any ideas? I should mention, it’s totally fine that it’s not on top of the image.
   I prefer it to be below for mobile anyways.
 * Thanks!!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9664689)
 * Try this instead:
 *     ```
       @media screen and (max-width: 480px) {
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .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: block;   
               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;
           }
   
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .custom-header-media,
           .has-header-image .custom-header-media img, 
           .has-header-video .custom-header-media video, 
           .has-header-video .custom-header-media iframe {
               position: static;
           }
   
           .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 {
               min-height: auto;
               -o-object-fit: unset;
               object-fit: unset;
           }
   
           .custom-header-media:before {
               background: none;
           }
   
           body.has-header-image .site-description, 
           body.has-header-video .site-description {
               color: #222;
               opacity: 1;
           }
   
           .site-branding .wrap {
               padding: 0 1em;
           }
       }
       ```
   
 *  Thread Starter [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9691881)
 * Sorry for the delayed response, this was what happened when I tried your updated
   code. Any ideas why?
 * [⌊Screen Shot 2017-11-16 at 8.49.34 PM⌉⌊Screen Shot 2017-11-16 at 8.49.34 PM⌉[
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 6 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9692767)
 * I’m not too sure, I’m having a hard time trying to find my recommended CSS in
   your website – If you’ve removed it can you add it back in? I need to see it 
   to debug it.
 * Are you using the “Additional CSS” option in the dashboard or are you editing
   your Child Theme style.css file?
 *  Thread Starter [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9702676)
 * Should I put the code back in under the child theme file? I just didn’t want 
   to confirm that newer code because he said it might break my site. I didn’t want
   to risk anything happening that would be hard to reverse. I can plug it in wherever
   works best for you again! Just tell me where.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9709482)
 * If you put it in the “Additional CSS” part of the dashboard, right at the bottom
   of it, the risk may be lesser. Let me know when you’ve added it.
 *  Thread Starter [missbonniegene](https://wordpress.org/support/users/missbonniegene/)
 * (@missbonniegene)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9716904)
 * I added it. It seems to have just enlarged the header photo even more so.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9717761)
 * I think I messed up a line of CSS, try this instead:
 *     ```
       @media screen and (max-width: 480px) {
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .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: block;   
               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;
           }
   
           .has-header-image.twentyseventeen-front-page .site-branding, 
           .has-header-video.twentyseventeen-front-page .site-branding, 
           .has-header-image.home.blog .site-branding, 
           .has-header-video.home.blog .site-branding,
           .custom-header-media,
           .has-header-image .custom-header-media img, 
           .has-header-video .custom-header-media video, 
           .has-header-video .custom-header-media iframe {
               position: static;
           }
   
           .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 {
               min-height: 1px;
               -o-object-fit: unset;
               object-fit: unset;
           }
   
           .custom-header-media:before {
               background: none;
           }
   
           body.has-header-image .site-description, 
           body.has-header-video .site-description {
               color: #222;
               opacity: 1;
           }
   
           .site-branding .wrap {
               padding: 0 1em;
           }
       }
   
       @media screen and (max-width: 768px) {
           .custom-header-media,
           .has-header-image .custom-header-media img {
               display: block;
               position: static;
           }
   
           .has-header-image.home.blog .custom-header {
               height: auto;
           }
   
           .has-header-image.home.blog .site-branding {
               left: 0;
               position: absolute;
               top: 0;
           }
       }
       ```
   
    -  This reply was modified 8 years, 2 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/).

Viewing 12 replies - 1 through 12 (of 12 total)

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentyseventeen/4.0/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/)

## Tags

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [phone](https://wordpress.org/support/topic-tag/phone/)
 * [Sizing](https://wordpress.org/support/topic-tag/sizing/)

 * 12 replies
 * 2 participants
 * Last reply from: [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/mobile-header-image-sizing/#post-9717761)
 * Status: not resolved