Header Image alignment/resizing

  • Hi there, I’m having issues with WordPress Twenty Seventeen header image on mobile.

    I’ve searched some previous threads and have tried some options, but not to my satisfaction.

    I changed the CSS as per Andrew Nevis suggestions, but huge grey space then appears. I don;t mind so much the original/natural image being used, I just want to maybe change from it being centered to a more favourable location on the image (if that makes sense).

    How can I attach images here to show you?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using this CSS instead:

    
@media screen and (max-width: 768px) {
    .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;
    }
}
    Thread Starter jodieyv

    (@jodieyv)

    Oh my goodness, the home page looks awesome thanks! It has made the other page headers look a bit funny though?
    (Sorry to be a pain, I am very grateful for your help!)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure I see the problem on the other pages, can you clarify?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header Image alignment/resizing’ is closed to new replies.