Mobile Header Image Sizing

(@missbonniegene)

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.

(@anevins)

WCLDN 2018 Contributor | Volunteer support

I see the issue. I’m not sure why it does that, I’ll look into it.

(@anevins)

WCLDN 2018 Contributor | Volunteer support

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)

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!!

(@anevins)

WCLDN 2018 Contributor | Volunteer support

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)

Sorry for the delayed response, this was what happened when I tried your updated code. Any ideas why?

(@anevins)

WCLDN 2018 Contributor | Volunteer support

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)

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.

(@anevins)

WCLDN 2018 Contributor | Volunteer support

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)

I added it. It seems to have just enlarged the header photo even more so.

(@anevins)

WCLDN 2018 Contributor | Volunteer support