• Hello. I have been struggling with my header image displaying correctly. First it was the mobile header that was cutoff. Now, I have fixed the mobile header but the header is now cutoff on desktop. Here is the code I currently have:

    .custom-header-media:before {
    background: none;
    }

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

    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 800px;
    }

    @media only screen and (max-width:768px) {
    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 400px;
    }
    }

    @media only screen and (max-width:480px) {
    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 200px;
    }
    }

    #top-menu{
    text-align:center;
    }

    Here is a screenshot:

    https://pasteboard.co/HFpRf38.png

    Maybe it is because I am using a 27″ monitor? Any ideas? Thank you.

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

  • The topic ‘Twenty Seventeen Portrait Header Displays Wrong’ is closed to new replies.