Need help? Check out our Support site, then


Distance between Header and paragraph - how to decrease

  1. 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.

  2. thesacredpath
    Staff

    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?

  3. 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).

  4. thesacredpath
    Staff

    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?

  5. 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/ )

  6. thesacredpath
    Staff

    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;
    }
  7. 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;
    }

  8. thesacredpath
    Staff

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

  9. 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 ?

  10. thesacredpath
    Staff

    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;
    }
  11. thesacredpath
    Staff

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

  12. 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.

  13. thesacredpath
    Staff

    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.

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

  15. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic