Unresponsive header image in mobile after resizing (corrected)

  • Unknown's avatar
    rvargas82 · Member ·

    Hi, I am using the twenty seventeen theme. My blog is realisticgardening.com.

    I noticed the header image wasn’t shrinking on mobile, so I found some css that solved that issue. This is the code:

    .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 {
    object-fit: initial;
    width: 100%;
    height: auto;
    display: block;
    min-width: initial;
    min-height: initial;
    }
    .custom-header-media {
    height: 65vw !important;
    }

    @media     screen and (max-width: 767px) {
    .custom-header-media {
    height: 50vw !important;
    }
    .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: 50vw;
    }
    .logged-in .wp-custom-header img {
    margin-top: 32px;
    }
    }

    I also wanted to shrink the header image because it’s huge in this theme, so I searched and found this code:

    /*Computer screen */

    @media     screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: 1200px;*/
    /*height: 100vh;*/
    height: 50vh;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    }
    }

    /* Mobile screen*/
    .has-header-image.twentyseventeen-front-page .custom-header {
    /*display: table;*/
    /*height: 300px;*/
    /*height: 75vh;*/
    height: 50vh;
    /*width: 100%;*/
    }

    /* Computer screen with logged in user and admin bar showing on front end*/

    @media     screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: calc(100vh – 32px);*/
    height: calc(50vh – 32px);
    }
    }

    The header image was then reduced by 50% in the theme but it stopped being responsive to mobile. How can I get both of these to work? Thanks.

  • fstat · Staff ·

    Hi there,

    You’re in the wrong forum. Your site is using the open-source WordPress software and you need to seek help at these forums:

    https://wordpress.org/support/forums/

    These forums are for WordPress.com hosted sites only. If you want to know more about the differences between WordPress.com and the WordPress software you can read this document:

    WordPress.com vs. WordPress.org

  • The topic ‘Unresponsive header image in mobile after resizing (corrected)’ is closed to new replies.