2016 theme spacing question

  • Unknown's avatar
    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: (visible only to logged in users)

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

  • Unknown's avatar
    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?

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

  • Unknown's avatar
    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.

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

  • Unknown's avatar
    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.

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

  • Unknown's avatar
    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.

  • 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!

  • Unknown's avatar
    metbaseball · Member ·

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

  • supernovia · Staff ·

    That spacing is very tight on my screen:
    Screen Shot 2019 05 13 at 3 22 45 PM

    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.