Site logo

[Support request] How to increase margin / padding before H2-H6 headings in single blog posts?

Home Forums Support [Support request] How to increase margin / padding before H2-H6 headings in single blog posts?

Home Forums Support How to increase margin / padding before H2-H6 headings in single blog posts?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1776778
    crosby87

    Hi there,

    I would like to increase my margin before headings H2-H6 in single blog posts. I cannot do it from the customiser because then margin of the paragraphs also change.

    #1776838
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you link us to the site in question? and perhaps specify which heading tags you want to target?

    If it’s password-locked, can you provide the credentials as well? So we can inspect the page as we may have to do a custom CSS writeup.

    You can use the private information text field for the details. Thank you. 🙂

    #1776842
    crosby87

    Hi,

    Sure. I would like to target H2-H6 headings within all single blog posts.

    #1776848
    Elvin
    Staff
    Customer Support

    You can try this CSS:

    body.single-post h2{
        font-size: 36px;
    }
    
    body.single-post h3{
        font-size: 30px;
    }
    
    body.single-post h4{
        font-size: 24px;
    }
    
    body.single-post h5{
        font-size: 18px;
    }
    
    body.single-post h6{
        font-size: 12px;
    }

    This selects ALL the specified heading within the single post pages.

    #1776852
    crosby87

    Thanks, but this increases the font size right? I would like to increase the margin/padding before these headings.

    #1776877
    Elvin
    Staff
    Customer Support

    Ah yes that’s just an example property. You can add more like margin and padding.

    Example:

    body.single-post h2{
        margin-top: 20px;
    margin-left: 30px;
    }

    You can do this for the rest of the headings as well.

    Note if you want to every heading to have the same CSS properties applied to them you can do it like this:

    body.single-post h2,
    body.single-post h3,
    body.single-post h4,
    body.single-post h5,
    body.single-post h6{
        margin-top: 20px;
        margin-left: 30px;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.