Support » Themes and Templates » Changing H1 H2 H3 Catalyst Theme in CSS

  • I tried to change the size of H1 in CSS but for some reason it didn’t change. I can’t figure out the problem. In CSS I have
    #content h1 {
    font-size: 28px;
    }
    #content h2 {
    font-size: 22px;
    }
    #content h3 {
    font-size: 18px;
    }
    But H1 keeps going back to 22px. To see the example of the problem go here: http://www.downsizefitness.com/success-stories/

    Downsize Fitness Members’ Before and After Weight Loss Success Stories Series
    Is in h1 but only 22px.

    Thanks for any help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m sorry that’s not a theme we support, try contacting your theme’s vendors.

    Have you tried

    content h1 {
    font-size: 28px!important;
    }
    #content h2 {
    font-size: 22px;
    }
    #content h3 {
    font-size: 18px;
    }

    Something else in your styles is affecting the size, but you can override it with CSS !important; so long as there is not a more specific call to a class or ID.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Please don’t use the “!important” rule for styling text or elements that affect the appearance of text. People (users) need to be able to override a website’s styles if they need to, for example by uploading a custom stylesheet through the browser that has higher contrast for text. With “!important” rules those custom stylesheets cannot override those styles.

    You can almost always use CSS specificity to achieve what you want instead, if the issue is regarding CSS specificity.

    True, it is better to never use !important, but it will work in a pinch for certain instances. In general, it is a bad practice and should be avoided.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing H1 H2 H3 Catalyst Theme in CSS’ is closed to new replies.