Distance between Header and paragraph – how to decrease

  • Author
    Posts
  • #1216124

    manligblog
    Member

    Hi,
    Is there a way to adjust the vertical space between the header lines and the body of text (paragraph) beneath.

    Thanks in advance :)

    (Yes I have the CSS customize upgrade)

    The blog I need help with is manligblog.com.

    #1216270

    The site you reference is set to private, so we volunteers cannot see it. At the very least we need to know which theme you are using, but it would be very helpful to see an example so that we can get the code right. Can you temporarily set your site to public and point us to an example?

    #1216276

    manligblog
    Member

    Thanks thesacredpath,
    Standard Twenty Twelve, Standard vertical distance between Header 2 and paragraph.
    (For the time, I have some pictures for whom I am awaiting permission to use -better to keep private).

    #1216281

    To make sure I’m giving you the right stuff, can you take a look at the demo site for twenty twelve, http://twentytwelvedemo.wordpress.com/ , and point me to an example?

    #1216286

    manligblog
    Member

    Yes TSP (if I may call you so),
    The vertical distance between “Welcome to our website …” and “One morning … “
    (I’m talking about the page at http://twentytwelvedemo.wordpress.com/ )

    #1216290

    Ah, now we’ve got it, and yes you can call me TSP. Add this and adjust the bottom margin value as desired.

    .entry-header {
    margin-bottom: 1.71429rem;
    }
    #1216300

    manligblog
    Member

    Yeah – English isn’t my first language, so I am probably not using the correct terms. Sorry about that.

    So what will the equivalent code be for headings (h2 for example)

    .entry-?? {
    margin-bottom: 1.71429rem;
    }

    #1216302

    .entry-header is the parent selector for both h1 and h2 page and post titles, so setting that will do both.

    #1216304

    manligblog
    Member

    Not working in my example,
    Check out http://twentytwelvedemo.wordpress.com/2012/03/25/hello-world-2/
    The h2 “Teeming Valley” is equidistant to text above and beneath, which I find visually suboptimal.
    My goal is to get “Teeming Valley” closer to the text beneath.

    Is the code still the same for the example above TSP ?

    #1216309

    That is h2 with a post/page. To change that, you would need to adjust here:

    .entry-content h1, .comment-content h1, .entry-content h2, .comment-content h2, .entry-content h3, .comment-content h3, .entry-content h4, .comment-content h4, .entry-content h5, .comment-content h5, .entry-content h6, .comment-content h6 {
    margin-bottom: 1.71429rem;
    margin-top: 1.71429rem;
    }
    #1216310

    The above would adjust all h* top/bottom margins (h1 to h6) within content.

    #1216320

    manligblog
    Member

    That gives me a lot or Warnings like:
    Heading (h1) should not be qualified
    Heading (h2) should not be qualified – and so on.
    Heading (h1) has already been defined
    Heading (h2) has already been defined – and so on.

    I know it isn’t your job to write my code here.
    So do you have some in depth CSS info – I used to write Pascal, C, C# etc. so I will manage if you point me in the right direction.

    #1216321

    Don’t worry about the warnings. Sometimes the CSS editor is a little overzealous in its warnings. The selectors were pulled directly from the existing CSS, so to make sure things work correctly and overwrite the original, we need to use those selectors as is.

    #1216331

    manligblog
    Member

    Thanks for your patience and kindness TSP – that code worked fine.

    #1216341

    You are welcome.

The topic ‘Distance between Header and paragraph – how to decrease’ is closed to new replies.