twenty twenty; reduce the distance between the top line and the first heading

  • Resolved zootrop

    (@zootrop)


    4 years, 9 months ago

    Hi everyone, I’m a wp beginner. When creating a (start) page with the Theme Twenty Twenty using the Cover Template option (for page attributes) in additional connection with a background image (Theme Option), the distance between the top line (i.e. the one containing the content: title of the web page, subtitle on the left and the display of the other already created “clickable” pages on the right) and the “Headline” (displayed as a permalink when selecting Start Page with Edit with the option Enter Words; I have here: “Welcome to”) is very/surprisingly large. How can this distance be reduced? (when using the standard template without background image the headline it is in a “normal” distance to the top line – why does the distance change so much when using the above options?) So I would like the headline of the page and also a following block to have less distance to the top line. How do you do that? Probably with a CSS rule? What is this rule? Thanks -right now- for your answers, which are easy to understand for a beginner! PS: The page is not online – that’s why I could not give a link; thank you for your patience and understanding!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi zootrop. As you guessed it, its a css rule. You need to go to style.css file, then search for .singular .entry-header. Here you need to reduce your padding size. Simple as that!

    Thread Starter zootrop

    (@zootrop)

    Hi codeworm, thank you sooo much for your quick answer; I was very happy about it! If only it were that simple… I followed your idea/instruction, but unfortunately it did not work. I have now entered the following in the Design Customizer under additional CSS:

    .singular .entry-header { padding-top: 2rem !important; padding-bottom: 60rem !important; }

    This will bring my headline to the top, but not the two following blocks: one with a picture and the following one with words. Unfortunately I do not understand this?

    BTW: There is also an arrow pointing down in the middle at the bottom of the screen. As soon as I click on it, the view jumps to the picture and the following words? Does the arrow now have something to do with the “large” distance between the heading and the following picture with the following words?

    “Simple as that”…
    First you have to find the right css file amongst about 200.
    The right one seems to be in wp-content=>Theme=>twentytwenty=>style.css
    I open it with Notepad++ and as told codeworm I search .singular.entry-header.
    Found it at line 2406 :
    .singular .entry-header {
    background-color: #fff;
    padding: 4rem 0;
    }
    I change 4rem for 1rem and nothing move.
    To be sure I’m in the rigt file I change #fff for #aaa and now I have a big grey banner.
    So there is progress…
    Right click on it =>Check the element (or something like that for you) to see where is this element :

    <header class=”entry-header has-text-align-center header-footer-group”>
    <div class=”entry-header-inner section-inner medium”>
    </div><!– .entry-header-inner –>
    </header>
    I have the name so it should be simple as said codeworm to find it in the code source of the page :
    Preview=>Ctrl+U and .singular .entry-header is there amongst about 546 other words in only one line…
    Somewhere in <body> ? There is 18 header but no one with that .singular .entry-header class.
    It’s not here I can reduce or remove this banner.
    May be Themes=>Customize
    – Site identity (or something like that) :nothing
    – Colors (why not?): nothing
    – Theme option : idem
    – Model with banner (this one could be fine) but still nothing even the opacity does nothing
    – Background image : no
    – Menus ? no
    – Widgets ? only for the footer
    – last hope : Front page settings = to set th articles and still nothing for that banner….
    Nothing in Tools
    Settings may be ?
    Nothing
    What else ?
    And the banner is still there and the header is still too broad.
    Thanks WordPress for this nice time spent to solve a problem “Simple as that !”

    The solution is here :
    https://www.ads-software.com/support/topic/space-around-page-title-and-header/
    Simple as that ! as told somebody else before…
    Thanks James Huff

    • This reply was modified 4 years, 8 months ago by kazon.
    Moderator James Huff

    (@macmanx)

    Happy to indirectly help! ??

    Thread Starter zootrop

    (@zootrop)

    Hi, all you lucky ones! I entered the *css rule from James in the Design Customizer as additional content, but unfortunately it does not work. Does the rule have to be entered in the style css file? If so where exactly? Why does it not work for me? Is it because of my above described constellation with cover template and background image? I hope someone will answer again, although it seems to be solved, but unfortunately not for me.

    *This does not help me:

    .entry-header.has-text-align-center.header-footer-group {
    display: none;
    }

    This helps me only conditionally (see my descriptions above):

    .singular .entry-header { padding-top: 2rem !important; padding-bottom: 60rem !important; }

    I’m counting on you, especially James…

    Moderator James Huff

    (@macmanx)

    The rules I recommended won’t help you, specifically because they’re for folks already using that display:none; rule. ??

    For your particular case, would you please give us a link to your site?

    Thread Starter zootrop

    (@zootrop)

    Hi James, I was very happy to hear from you again!

    My site is in a coming soon mode and I didn’t want to publish it before it was finished (there is really not much done yet and it still looks not so nice/very “modest”). I ask for your understanding. I only just wanted to reduce the space between the top line (encl. menu etc.) and the first headline, which is the space that appears when you select for the page Cover-Template (instead of Standard-Template). That can’t be that difficult? Maybe we will at least give it one/another/last try? Thanks! All the best Zootrop

    Moderator James Huff

    (@macmanx)

    This may work via Additional CSS:

    .admin-bar .screen-height {
    min-height: calc(100vh - 320px);
}

    And adjust that 320 as desired.

    Thread Starter zootrop

    (@zootrop)

    Yep, that’s it!!! Good things come to those who wait! My compliments to the best! Many many thanks and all the best once again!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘twenty twenty; reduce the distance between the top line and the first heading’ is closed to new replies.