2016 theme spacing question

  • Author
    Posts
  • #3305095

    metbaseball
    Member

    In the 2016 theme, how can I reduce the spacing between a heading and a paragraph?

    The blog I need help with is writerhoward.wordpress.com.

    #3306862

    supernovia
    Staff

    @metbaseball do you mean the title or the headings within the content?

    If it’s between the title and the content, you’ll need a Premium plan so you can add CSS to the site. This plan would work:
    https://wordpress.com/premium

    If it’s between a mid-content header and the text below it, you can likely adjust it with some inline CSS. Just note you’d need to do this every time you wanted to close that space, unless you have site-wide CSS capabilities.

    If you want help with the inline CSS, let us know which header you need to change (send a link to an affected page and the text of the header) and we’ll help you with that.

    #3307419

    metbaseball
    Member

    My page is here.

    The header in question is “Statcast Search Settings.” How can I change the spacing after it?

    Can the spacing before it also be changed?

    #3307535

    kokkieh
    Staff

    Okay, first, click on the three dots to the top-right of the editor for the editor options, then select the Code editor option.

    Look for the code for the heading. It will start with wp:heading {"level":5}

    Inside the brackets for the first h5 tag in the next line, type a space, then add this:

    style="margin-top:1em; margin-bottom:1em;"

    When you switch back to visual mode, the block will show an error, but you can ignore that and just update the page, and the changes should get applied.You can play with the actual values until it looks the way you want.

    As @supernovia mentioned above, if you want this to apply to other headings on the page, you’ll need to add the style code to every other heading on the page you want it to apply to. The only way to change this once-off for the entire site is via custom CSS in the Customizer, and that will require the Premium Plan.

    #3307645

    metbaseball
    Member

    When I did it, the error message says, “This block contains unexpected or invalid content” with two buttons, “Resolve” and “Convert to HTML,” the latter highlighted in blue.

    So then I should not click either button, but just “Update” if the previewed changes are acceptable? Will doing that cause the error message to disappear?

    Also, if I upgrade to the plan with custom CSS, will that error message no longer appear?

    Thanks.

    #3307781

    kokkieh
    Staff

    So then I should not click either button, but just “Update” if the previewed changes are acceptable? Will doing that cause the error message to disappear?

    You can click the Resolve button if the error bothers you. That will change the block into a plain HTML block instead, but the end result will be the same. But if you just leave the block with the error and update the page, it will still work.

    Also, if I upgrade to the plan with custom CSS, will that error message no longer appear?

    If you use custom CSS you’ll be making the changes to the theme directly, not by adding code within the editor. It’s the extra code being added to the block that causes that error, so adding CSS won’t make it go away if it already appears, but removing the extra code you added should make it go away – if you have custom CSS you won’t need that extra code any more.

    • This reply was modified 1 year by  kokkieh.
    #3308610

    metbaseball
    Member

    I plan to upgrade to a plan with custom CSS. If you could give me the CSS I would use in that to reduce the spacing between a heading and a paragraph, I would appreciate it.

    #3308919

    supernovia
    Staff

    Sure thing. For the main title:

    @media screen and (min-width: 61.5625em) {
       .entry-title {
           margin-bottom: .7em;
       }
    }
    @media screen and (min-width: 44.375em) {
       .entry-title {
          margin-bottom: .6;
    }
    

    For other titles:

    @media screen and (min-width: 61.5625em) {
       .entry-content h4, .entry-content h5, .entry-content h6 {
          margin-bottom: .6;
       }
    }

    I think that will do it. You can adjust the “margin-bottom” numbers as you’d like. If after you add the CSS upgrade, you find that there are still other titles that need less space, send a link and we’ll take a look.

    #3309112

    metbaseball
    Member

    I was able to customize the CSS, making the changes under “For other titles,” but on the webpage (https://batsandstats.com/2019/05/07/statcast-primer-whiffs-in-chase-zone/) they are not appearing correctly.

    @media screen and (min-width: 61.5625em) {
       .entry-content h4, .entry-content h5, .entry-content h6 {
          margin-bottom: .6;
       }
    }

    I tried to adjust that without success. There is too much space before the header and too little after. Further, when I make the changes they do not appear in preview mode.

    #3309661

    supernovia
    Staff

    @metbaseball please make and save the changes so we can see what you see.
    Right now I don’t see any CSS changes in place.

    Also, be sure to add these as new lines, after the text that’s there. Thanks!

    #3309695

    metbaseball
    Member

    Try it now. I added all the changes you suggested and published them.

    #3309719

    supernovia
    Staff

    That spacing is very tight on my screen:
    https://cloudup.com/cEbvL9TuA2v

    But I’m guessing yours is smaller. You can add this CSS and adjust as you’d like:

    .entry-content h4, .entry-content h5, .entry-content h6, .entry-summary h4, .entry-summary h5, .entry-summary h6, .comment-content h4, .comment-content h5, .comment-content h6, .textwidget h4, .textwidget h5, .textwidget h6 {
        margin-top: 3.5em;
        margin-bottom: 1em;
    }

The topic ‘2016 theme spacing question’ is closed to new replies.