WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] How do you control the space after p and h tags? (13 posts)

  1. rdg@me.com
    Member
    Posted 1 year ago #

    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?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  3. rdg@me.com
    Member
    Posted 1 year ago #

    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)

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  5. rdg@me.com
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    <!--[if gte IE 9]>
      <style type="text/css">
    
    <![endif]-->
  7. rdg@me.com
    Member
    Posted 1 year ago #

    removed..

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  9. rdg@me.com
    Member
    Posted 1 year ago #

    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.

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  11. rdg@me.com
    Member
    Posted 1 year ago #

    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

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  13. rdg@me.com
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic