[Resolved] Custom Page and Section Header Font Size and Color

[Rachel]

Hi,
I would like to have a different font size and color for my H1 headings in Page Headers and Section Headers compared to what they are for a single blog post. I also need them to be responsive for mobile.

Are you able to assist with how I do this as there doesn’t seem to be an option to tailor the font size in the header element or in the section.
Thanks,
Rachel

[Leo]

Hi Rachel,

You can do this in the HTML:
<h1 class="page-header-h1">Page header title</h1>

Then target it with CSS like this:

h1.page-header-h1 {
    font-size: 20px;
}
@media (max-width: 768px) {
    h1.page-header-h1 {
        font-size: 20px;/*mobile size*/
    }
}

Then do the same with Section headers but with a different class name.

Let me know if this makes sense 🙂

[Rachel]

Ok thanks, got it working. I have around 100 lines of additional CSS now – is this an issue in terms of performance? THanks

[David]

Hi there,

100 lines will be fine, we suggest using a Child theme if the CSS starts running over 400 lines

[Rachel]

Great, thanks!

[David]

You’re welcome – glad we could help

[Author]

Posts