Support » Theme: Twenty Twelve » How do you control the space after p and h tags?

  • Resolved rdg@me.com

    (@rdgmecom)


    I can’t where in the css you control the space after p and h tags. It’s something like 24px by default and I want to be able to control it. I want to reduce it. Does anyone know where it lives in the theme’s default css file?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Download and install the Jetpack plugin and use its Custom CSS section in the dashboard to hold this;

    .entry-content p,
    .entry-summary p,
    .comment-content p,
    .mu_register p {
     margin: 0 0 15px;
    }

    Dear Andrew,

    Thanks for your reply. (the second time you’ve replied to me in as many weeks). I generally avoid plugins, preferring to write my own css in BBEdit, then saving to the server. I have a child theme set up and my own css override file. That is all working fine. It was simply the part of the style.css which controls the spacing after <p> and <h> tags I was hoping to find.

    I’ve already disabled the margins in the line of code you referred to and I still have what appears to be about 24px of space between any given <h> element and a subsequent <p> element:

    .entry-content p,
    .entry-summary p,
    .comment-content p {
    	margin: 0;
    }

    I’ve put a partially opaque bottom border on each of the elements for layout purposes which might help to show you the space I’m trying to get rid of.

    For example.. (http://www.richardgraham.it/mics/the-school/organisation-structure)

    “LIBRARY

    Our library houses”

    I want about half the space between the <h3> heading “LIBRARY” and the subsequent <p> text “Our library houses” but can’t find where in the css file I can modify this. I wish CSS would follow print design standards and behave like inDesign with ‘space after’ and we wouldn’t have these problems anymore.

    Anyway, any help you might give me would be most appreciated.

    (I’m also having massive problems with custom walkers to split the main and sub menus so I can style them separately but I’ll behave myself and write a separate query for that after properly researching it myself)

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I don’t think your Child Theme stylesheet is set up properly, you should be adding styles to override old styles that you’ve imported over.

    Can you try adding this;

    .entry-content p,
    .entry-summary p,
    .comment-content p {
    	margin: 0;
    }

    right at the very bottom of your Child Theme stylesheet?

    Have just added said code after the IE 7 and 8 declarations at the end of the child css file and there is no change.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    That HTML code shouldn’t be in your CSS file, remove these bits;

    <!--[if gte IE 9]>
      <style type="text/css">
    
    <![endif]-->

    removed..

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Okay, the style is working for the paragraph.
    To follow-through the style on the heading, amend the code to this;

    .entry-content p,
    .entry-summary p,
    .comment-content p,
    .entry-content h2 {
    	margin: 0;
    }

    I’m too ‘coded out’ today to get my head round this..

    Adding entry-content h2 had dramatic results but not the ones I would have expected. If you don’t mind I will not mark this as resolved until I’ve slept a little, come back to it with a fresh morning head and understood why what worked worked but what is still left to fix hasn’t yet worked. I’m sure the help you’ve given me will allow me to fix the problem.

    Thank you very much.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    For when you come back:
    To add more of a gap, you could try this code (instead of old code) and mess around with the value 10 (below)
    E.g;

    .entry-content p,
    .entry-summary p,
    .comment-content p,
    .entry-content h2 {
    	margin-bottom: 10px;
    }

    I think I’ve got my head round it now but it’s time to cook my tea!

    I just wanted to write to you to thank you once again for your invaluable help. Coding on your own can be a very fruitless business. A bit of quality help can save days.

    My thanks.

    r

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    And I want to thank you for sharing your issue with WordPress.org forums, your contribution is invaluable for people with similar issues. Thank you.

    Andrew,

    Sorry I didn’t mark this as resolved sooner. I managed to have an FTP accident this morning and over-wrote my css file with yesterday morning’s version. It’s taken me a while to get back from that.

    I’m sure I have a lot of separate css declarations styling (or trying to style) the same elements in earlier parts of the code but your having directed me to that particular line of the css has allowed me to resolve the layout problems I had.

    r

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How do you control the space after p and h tags?’ is closed to new replies.