TwentySeventeen, need the same smaller page header image on the front page.

  • Hi,

    https://psian.org

    I need to get the front page header image to display the same as the smaller page headers.

    I can get the image “canvas” to the the same size for all pages using the code below. The front home page header image looks zoomed in very large in the smaller canvas space while the individual pages are just fine.
    When I adjust the image on the home page to look better, then the headers on the rest of the pages don’t look right.

    @media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .home.blog.has-header-image .custom-header-media {
    min-height: 237px;
    height: auto;
    }

    .twentyseventeen-front-page.has-header-video .custom-header-media {
    height: 100vh;
    }
    }

    Larry

Viewing 5 replies - 1 through 5 (of 5 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hello larry-mcmahon,

    Add below css code into your current child theme’s style.css file.


    .home .custom-header-media img {
    position: relative;
    margin-bottom: 70px
    }
    .home .custom-header .custom-header-media::before {
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
    }

    Hope this will helps you.

    Thanks!

    Thread Starter Larry McMahon

    (@larry-mcmahon)

    Hi,

    Better, but it did not change how it looks on my iPad.

    On chrome the bottom is cut off and in Edge the top is cut off with what looks like a lot of padding on the bottom.

    However it looks fine in wp appearences tho the height is a bit different than in the other pages.

    https://psian.org

    Wish I understood your css better.

    Thanks for the help,
    Larry

    Thread Starter Larry McMahon

    (@larry-mcmahon)

    Does this need to be in the child css or can I put it into >customizing>css?

    I will try that so I can try to learn what does what.

    Larty

    Thread Starter Larry McMahon

    (@larry-mcmahon)

    Hi,

    There seems to be no ideal solution, just a compromise for various browsers and devices.
    Mostly, it seems like browser compromises between Edge/IE/Safari and Chrome/Firefox.

    Still hunting for a better solution, but as I move the front page header image one way the page header images go the other way:

    /* Control of headers */
    /* Removes top crop of front header. */
    div#wp-custom-header.wp-custom-header {
    height: 20vh;
    }
    /* Limits the overall header height. */
    div.custom-header-media {
    height: 40vh !important;
    }

    The search continues…

    Larry

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @larry-mcmahon, In future please don’t post your issues on other people’s support topics. If you post on someone’s thread it makes it look like the thread has received support, which in turn makes it less visible to us.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘TwentySeventeen, need the same smaller page header image on the front page.’ is closed to new replies.