Homepage smaller header images

  • Resolved olegson

    (@olegson)


    1 year, 3 months ago

    hello dear community!

    right now I’m creating the new website for my mom’s new doctor office and we chose the Twenty-Seventeen theme for our purpose. The site itself already works and there are only few issues I have to rework (SEO, auto-backup and some other few things). It will be a very sleek and elegant white page, not too many gimmicks and more focused on direct and clear information, so all in all not a heavy or difficult project. But I’m missing css coding knowledge and don’t want to break something or pregrogram problems with further updates. All in all right now I just need help with the startpage/homepage and the header-media / images => on desktop/iMac you have to scroll ’till you get the necessary informations. The wish of my mom is to minimize the borders (height) of the shown images without disrupting the image-quality. Summarized not the whole picture shall be seen but just a fragment of it and when you scroll the picture moves with it (so just like it is on default, only that the height border is only a quarter or even less of the default settings).

    sorry for my bad english/description, I actually made a short video where I try to visualize the desired change: https://youtu.be/0JsZ4dJOjTg

    the website itself is on maintenance, but I hope/have the feeling that the css changes are practically self-explanatory. If I’m wrong please tell me and I create an author account for you.

    thankful for every input ?? (I searched the forum here for my case but haven’t found a suitable open thread where this kind of question was asked before).

    best regards,

    Oleg

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @olegson – thanks a lot for the narrated screencast, it’s very helpful to understand what you’re looking for.

    Here’s some custom CSS that should get you close to your goal. You can add it to the CSS editor at Appearance > Customize > Additional CSS:

    /* Homepage - reduce height of header & panel images, wider screens only */
@media screen and (min-width: 48em) {
    .has-header-image.home .custom-header {
        height: 40vh;
    }
    .home .panel-image {
        height: 30vh;
    }
}

    You can change both values for “viewport height” (vh) as you like. The default is 100, which currently displays the image at 100% of the viewport (i.e. browser window) height.

    Let me know how it goes!

    Thread Starter olegson

    (@olegson)

    Dear Kathryn,

    thank you very much, your idea worked right from the start like a charm! Now my Mom fell so much in love with it, that she wants it for all pages with different images instead of normal pictures embedded ??????

    but I will look for another option, maybe inserting half transcendent pictures as background will also fascinate her. I will play around a bit and probably will find the fitting solution (needs to be sth more simple which works also with mobile devices)

    Thank you so much for now! When I’m done and my mom is satisfied I’ll get back to you and at least invite you to a coffee break virtually ????

    best regards,

    oleg

    Moderator Kathryn Presner

    (@zoonini)

    You’re very welcome, glad your mom is happy! Have fun experimenting. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Homepage smaller header images’ is closed to new replies.