Archived topic
Custom Page and Section Header Font Size and Color
5 replies · Started by Rachel on December 4, 2018
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
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 :)
Ok thanks, got it working. I have around 100 lines of additional CSS now - is this an issue in terms of performance? THanks
Hi there,
100 lines will be fine, we suggest using a Child theme if the CSS starts running over 400 lines
Great, thanks!
You're welcome - glad we could help
