Change font size of header tags in Evolve

  • Hi,

    As I don’t like the font size of the h2 and h3 tags on my website (Interieurtips), I tried to change it. I tried it with both style.css and custom css, but nothing seems to work properly (or at least not with the way I’m doing it).

    style.css was like this:

    h2 { font-size: 40px !important; line-height: 40px; padding: 5px 0px;letter-spacing:-1px; }
    h3 { font-size: 34px; line-height: 34px; padding: 5px 0px;letter-spacing:-1px; }
    h4 { font-size: 27px; line-height: 27px; padding: 5px 0px;letter-spacing:-1px; }
    h5 { font-size: 20px; line-height: 20px; padding: 5px 0px; }
    h6 { font-size: 14px; line-height: 18px; padding: 5px 0px; }

    I changed it into:
    h2 { font-size: 20px; line-height: 20px; padding: 5px 0px;letter-spacing:-1px; }
    h3 { font-size: 16px; line-height: 16px; padding: 5px 0px;letter-spacing:-1px; }
    h4 { font-size: 12px; line-height: 12px; padding: 5px 0px;letter-spacing:-1px; }
    h5 { font-size: 11px; line-height: 11px; padding: 5px 0px; }
    h6 { font-size: 10px; line-height: 10px; padding: 5px 0px; }

    Now everything seems to be messed up. Chrome keeps showing huge h2 tags, while Internet Explorer shows H2 tags in a smaller size than H3 tags (as you can see on this post). Firefox also doesn’t seem to understand one bit of what I’m trying to do here.

    Adding
    h2 { font-size: 20px;
    }
    h3 { font-size: 16px;
    } to custom css doesn’t help either.

    Does anyone know what I’m doing wrong? I really can’t figure it out. It must be something obvious, but I can’t see it.

    I hope someone knows the answer to my question. Thanks!

    https://www.ads-software.com/themes/evolve/

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

  • try using !important to ensure your CSS is used.

    Hard to stop when you start, here is my first CSS draft to make the titles and paragraphs responsive for this theme. (still needs some work)

    Pastbin

    Thread Starter Romi86

    (@romi86)

    Wow, that’s a coincidence: I just wanted to check whether someone responded to my question and exactly in that moment you did. Weird!

    Anyhoo, thanks for responding. I tried that several times in style.css before posting my question and it didn’t work. For some reason I didn’t try the same thing with custom css, so I tried that now… it worked! Maybe I put the !important after the ; rather than before the ; (I did that by mistake just now, so maybe that was the problem the whole time).

    Looks like you’ve been busy with your css ??

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change font size of header tags in Evolve’ is closed to new replies.