Reduce Cover Template header height

  • Resolved wilx

    (@wilx)


    5 years ago

    Seems like such a simple thing to do, but I can’t see a way to reduce the height of the header image. It’s full-screen-height by default, but I’d prefer somewhere between 50% and 75% so you can see at least a little of the page’s content.

    Am I missing an option to easily adjust this?

Viewing 15 replies - 1 through 15 (of 19 total)
  • Thread Starter wilx

    (@wilx)

    OK! I’ve managed to do this with custom css:

    .cover-header {
    max-height: 70vh!important;
    }

    – BUT this has now left my site page title cut off – is there a way of having the title appear higher up the page to be visible again?

    Thread Starter wilx

    (@wilx)

    Sorted!

    ———————-
    .cover-header {
    max-height: 75vh!important;
    }

    .cover-header-inner {
    padding: 0 0 40vh 0
    }

    • This reply was modified 5 years ago by wilx.
    Moderator Mel Choyce-Dwan

    (@melchoyce)

    Awesome, glad you figured out a solution. Please feel free to open more support tickets if you run into new problems.

    It didn’t work for me. But it appears that if you have no title in the page you will see the height of the Header, which is still to much for my design.
    I need to find a way to omit showing those page titles for a start.

    Found the way to not display the Headings in Pages

    .h1.entry-title {
    display: none;
    }

    source https://www.ads-software.com/support/topic/hiding-page-title-with-css/

    @wilx thankyou!

    It’s work very well on my page too.

    This was very helpful, thank you @wilx!

    In case someone finds it useful, this is how you apply wilx’s solution to a single post (under Appearence -> Customize -> Additional CSS). It effectively gives you a ‘new template’ (header image only) to play with in Twenty Twenty ??

    ———————-
    .postid-123 .cover-header {
    max-height: 40vh!important;
    }
    .postid-123 .cover-header-inner {
    padding: 0 0 70vh 0
    }

    This is what I need to do too. Please see my site at ATXhomelessapp dot com. I am just trying to make the header thiner. Having a hard time with this CSS. Help?

    NOT RESOLVED!

    I have tried all solutions above and none work.

    I cannot believe that any designer would design a page header that covers 3/4 of the screen…. WHY?

    How to delete the page header please?

    I have the same problem, tried all of the above and none of it works!

    Can someone help?

    Hi Team any idea on how to reduce the size of the header, I have tried all the above options non seem to work for me. am using twentytwenty theme newer wordpress.

    what worked for me was to paste the code by @wilx in the Extra CSS segment of the customiser.
    worked like a charm without having to dive into the theme editor

    I tested around, maybe this way is simpler (pls change to your own page id):

    .page-id-304 .screen-height {
    min-height: auto;
    }

    Another thank you from me @wilx ! Just started experimenting with the theme and this was the first thing I needed to change to get it readable on a mobile

    Edit: experimenting with different cover image sizes produces different results, so you may also need to tweak the CSS depending on your site.

    • This reply was modified 4 years, 2 months ago by C Green.
    Theatre NDG

    (@ilovetheatrendg)

    where do I put the css code? I know nothing but I don’t like the header

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Reduce Cover Template header height’ is closed to new replies.