Harmonic – Resized H1-H6 space above & below word

  • Resolved inkittattoos

    (@inkittattoos)


    8 years, 9 months ago

    Hi Hi

    I might be having an extreme blond moment here, but I can not seem to get the space above and below the headings to changed after I have altered their size.

    I want it to work in my posts, pages and profiles.

    I went into the css editor and followed examples on other posts, but I must be doing something wrong as no matter what I try the gap remains huge.

    I have a plugin where I can change the paragraph size, but need to use headings for SEO purposes.

    This is what the Typography on h currently locks like

    h1 {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

    This is in the Editors under Styles – Stylesheet (Styles.css) however I see there is also a Visual Editor Stylesheet and RTL – so not sure if I’m editing in the right place.

    Hope someone can help.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there! Are you working on this site: inkittattoos.co.za?

    To clarify, please look at this screenshot and let me know if I’m looking at the right thing. Do you mean the space around the Page Titles (like “Tattoos” in the screenshot) or the Headings (like “Professional Quality Tattoos” in the screenshot)? And you want the space to decrease above and/or below?

    Or do you mean somewhere else on your site entirely? If you can confirm which spot, I’ll take a look! ??

    Thread Starter inkittattoos

    (@inkittattoos)

    Hi Sarah.

    Thanks for the reply.
    Yes I’m working on inkittattoos.co.za.

    I’m referring to “Professional Quality tattoos” on the tattoo page and “Ink IT Tattoos is a professional and modern tattoo and body piercing studio using ONLY single-use and/or Sterilized instruments.” on the About us Page.

    I would like to decrease both the space above & below.

    I need it to be a heading (for SEO purposes) but look like a paragraph – or part thereof.

    Okay, I see what you mean.

    You could wrap each of these pieces of text in the same Heading tag, then add a style for those. Since you’re using the Jetpack plugin, make sure your Custom CSS module is activated, then paste the CSS into Appearance > Edit CSS, rather than editing your theme files directly (since changes there will be lost when the theme is updated).

    For example, if you wrap them in <h4> the following CSS would target all H4s:

    h4 {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 0;
}

    Your paragraphs are set to 16px & normal right now, so this would make the H4 heading text appear the same.

    (You can also target specific pages within your site if you don’t want all H4s to have this same styling. Using H1 & H2 looks like it’ll effect site title & page titles on your site, so you may want to go lower than those to allow for different ranking/styling of your headings.)

    Your paragraphs currently have 20px of margin along the bottom, which is causing some of the spacing in between, so to remove that from all paragraphs you could also add this into your CSS editor: 

    p {
    margin-bottom: 0px;
}

    There is more information on using headings with paragraphs here that may be helpful in getting yours adjusted just right: https://stackoverflow.com/questions/25327107/how-to-display-a-header-inline-with-paragraph-text-using-divs-or-an-alternative

    Let me know if you have any questions! ??

    Thread Starter inkittattoos

    (@inkittattoos)

    Hi Sarah

    Thanks a million – that did exactly what I wanted!
    And the additional link is super helpful.

    ??

    Awesome! Glad it worked. You’re welcome. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Harmonic – Resized H1-H6 space above & below word’ is closed to new replies.