Getting rid of space between heading and body but keep text formating different.

  • Author
    Posts
  • #3035905

    kipvaughan
    Member

    This seems like it would be a very basic thing to do (have the paragraph heading and body together to show their relation to each other) but I am having a hard time figuring it out. After getting this changed I would then like to apply this setting across all my pages. It’s hard to find details about this online so I would greatly appreciate anyone who can help!

    The blog I need help with is onedaydesign.com.

    #3036012

    siobhyb
    Staff

    Hi @kipvaughan!

    You could reduce the space between the heading and content of your posts/pages with the following custom CSS:

    .single .entry-header, .page-header {
        margin-bottom: 1em;
    }

    Increase/decrease the value of margin-bottom from 1em to increase/decrease the space. Please note that increments/decrements of 0.1 are enough to have an impact e.g. 1.1em, 1.2em, etc.

    It’s also worth noting that as a WordPress.com Premium owner you have access to live chat support via our contact form here:

    https://wordpress.com/help/contact

    You’re welcome to either post to this forum or contact us via the above form for CSS help in the future. :)

    #3036232

    kipvaughan
    Member

    Thanks, I will look into that. I had one other question, I briefly used CSS in tutorials 10 years ago and from what I can remember you can choose to apply CSS to a single page or use a different style CSS across many pages which streamlined much of the work.

    My question is when I am editing CSS in the WP editor is there a way to apply that code across pages? That would be ideal since the text attributes will usually be the same. Can you please tell me how to do that?

    #3036248

    siobhyb
    Staff

    By default, the CSS in you place in the WordPress.com Customizer will work across all pages on your site and you can use more specific CSS to target certain pages, if you wish to.

    #3036258

    kipvaughan
    Member

    I noticed that the space seems to only change between the heading at the very top (“Mary Brown…”) and the body. What I am mainly interested in changing is the sections below that (“Selecting Updated”, “Kitchen & Bath…”) Can I make an adjustment to the code to mainly effect those areas? Basically what I am trying to do is make it very clear what headings below to which text.

    #3036259

    Hi. You can try the following:

    h4 {
        margin-bottom: 0;
    }

    That will remove the bottom margin between the Header 4 text (h4) and the text that follows.

    You may also try the following if the above does not work.

    h4 {
        margin-bottom: 0!important;
    }
    #3036265

    siobhyb
    Staff

    @kristinaismyname: Thanks for your help!

    Just to note: It’s best to avoid using !important whenever possible. It’s usually not needed (like here) and it can make it tricky troubleshoot custom CSS further down the road, since !important acts as an override. Generally it’s best to write more specific CSS if you need to, rather than rely on !important to force CSS to work.

    @kipvaughan: I see you’ve refactored your HTML since writing in so that the titles on your home page no longer use H4 tags and, therefore, appear closer to the other text by default. Are you happy with the way your site’s looking now? If not, let us know and we can help further.

    #3036277

    kipvaughan
    Member

    @siobhyb: I use several different heading styles depending on what needs to be emphasized. I think I mainly use H3 and H4 at the moment. I didn’t realize a significant difference in the spacing between the different heading styles.

    Also I am looking for an easier way to add headings without changing all the other body text in the paragraph. Right now I switch to heading text and then have to go into the code to change the body text back to regular paragraph text. Is there a way to do this that isn’t so time consuming? In a page layout tool (Quark/InDesign) changing the heading in a paragraph doesn’t change the rest of the text.

    @siobhyb and @kristinaismyname
    I will try the coding you suggested and get back to you. I got a little bogged down on some other work this last week.

    #3036280

    @kipvaughan, h1-h6 are heading elements and cannot be used within a paragraph, that is why you can’t make just part of a paragraph h3 or h4. It’s defined that way by the web standards. Quark and InDesign do not follow web standards, which is why this sort of thing can be done in them.

    If you wish to affect the style of some selected text within a paragraph, one way to do that would be to use a span tag around the text and use inline styling to style that text.

    An alternate would be to create a CSS rule with a unique CSS class that had that styling and then use a span tag in the post or page and set that class in the span tag, something like this.
    This is a paragraph with some <span class="my-text">styled text</span> within it.
    You would then add a CSS rule with your styling as desired to your custom CSS, something like this.

    .my-text {
    font-weight: bold;
    font-style: italic;
    font-size: 120%;
    color: #cc0000;
    }

    #3036281

    I agree with @thesacredpath – it sounds like you probably want to place the text you want to emphasise between <span></span> tags. If you apply heading styling to text within a paragraph, it becomes pretty messy, depending on how you are editing your text.

    Also, the element tags you use have semantic significance to the browser, and can be used to inform browser accessibility features. It’s a good idea to use HTML elements as they’re intended to be used so your users can better access your site and its content.

The topic ‘Getting rid of space between heading and body but keep text formating different.’ is closed to new replies.