Mobile Header Image Doesn’t Resize/Unresponsive

I’m having the same issue with the main site header not resizing / being responsive. When my site is set up as static page, but the other header images of linked pages as static page content, are responsive.

The site typically has a video header, but uses a static image as fallback while the video loads or for low bandwidth devices, such as mobile.

My site is http://clancy.tech/

@timmcke, The image is responsive but it resorts to cropping-to-center on mobile. This is a common technique to avoid a small header image and a large gap beneath the image as it proportionately resizes. Either the image is cropped or the image is resized small with a gap beneath it.

If you want the resized image & gap technique, try the following.
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 http://wordpress.org/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 (max-width: 480px) {
   
       .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;
       }
   }
   

4. Save

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

• This reply was modified 9 years, 2 months ago by Andrew Nevins.
• This reply was modified 9 years, 2 months ago by Andrew Nevins.

@anevins Created a new post here: https://wordpress.org/support/topic/mobile-header-image-doesnt-resize-instead-stays-resorts-to-cropping-to-cente

@timmcke, Another way around it would be to change the theme design on mobile so that the title does not sit on top of the image. It would produce this result: https://snag.gy/iywSX0.jpg – Is that what you want?

You can achieve that by using this CSS 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 {    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;
    }
}

• This reply was modified 9 years, 2 months ago by Andrew Nevins.
• This reply was modified 9 years, 2 months ago by Andrew Nevins.

Hello here from Holland, I am facing the Same seizing problems with Twente Seventeen (test enviroment http://www.elzentlaanappartementen.nl/MSO/ ), but when I only use the menu navigation in Stead of scrolling The seizing is OK! In my case I have NO problems with the iPhone and macbook, only with the iPad Air2 and iPad mini..

Second option worked perfectly for me… Thank you!

Thanks does not work en now my “in between” images have become smaller in the iPhone vertical.
I use now this similar CSS but still no correct view of header image.

.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;
}