Why is my H1 different on the homepage and blog level?

Actually, on your blog/home page, the only H1 tag is used for the site title. All of the headings for the post excerpts are H3 tags, which, design-wise, is correct. You generally only want the site title to be H1 on the home page, because it makes it easier for search engines to distinguish the site name. On other pages, like single post pages or single pages, H1 is used for the title of the post or page.

If you use a web debugging tool like Firebug or Chrome Developer Tools, you’ll be able to see what rules affect the H1/H3 tags. On your blog page, the H3 post titles are mostly affected by these rules:

.alba-blog-standard-block-content h3 {
    font-size: 34px;
    margin: 0;
    padding: 4px 0 15px;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #082c86;
    font-family: 'Playfair Display SC', serif;
}

On your single post pages, your post H1 title is mostly affected by these two rules:

.page-header h1 {
    float: left;
    margin: 0;
    padding: 20px 0 15px;
    font-size: 26px;
}

body, .page-header h1, .alba-banner-heading h5, .alba-carousel-block, .alba-heading-text {
    color: #5a5b67;
    font-family: 'Montserrat', sans-serif;
}

So if you add a rule like this:

.page-header h1 {
    font-family: 'Playfair Display SC', serif;
    font-size: 34px;
    color: #082c86;
}

Then your H1 post titles should look close to the H3 excerpt titles on the blog page.

Thank you for the info, but how would I do this? I tried adding the rule at the end of the css (as I did for post font, which did work) but how would I add this rule so it works?

I tried to add this rule in each section you mentioned, but that totally messed up the theme (I somehow deleted the carousel on the home page, luckily I had a backup copy of the theme saved in a word doc before I started messing around with the css)!

Please advise if you can.

Thank you again,
Christie

Hi, Christie:

How have you been making changes up to now? It looks like either the theme has a Custom CSS option or you’re using a custom CSS plugin. If you add that rule to the very end, it shouldn’t negatively impact anything, I’m surprised that it would make the carousel disappear.

I did add the rule at the end of the theme. But it didn’t change the heading unfortunately.

Here’s what the code looks like at the end.

}
.footer-right {
width: 100%;
float: none;
padding: 4px 0 15px;
text-align: center;
}
}

.post {
font-size:22px;
}
.page-header h1 {
font-family: ‘Playfair Display SC’, serif;
font-size: 34px;
}

Please advise if I’m doing something wrong. If there’s no resolution of course I’ll just keep it as it is, it’s still a much better site than I expected.

It looks like you’ve added the rule to the end of the theme’s style.css file. Just remember that if you ever update the theme, your changes will be lost. Does the theme have a custom CSS option? Better to use that, instead, or use a custom CSS plugin.

Your rule isn’t working because there’s another rule with the same selector that is being included in an inline stylesheet after the theme’s style.css file. That’s why I asked in an earlier post if your theme has a custom CSS option, because that’s the way I often see a custom stylesheet implemented. To make your rule override the later rule, change the selector like this:

.single-post .page-header h1 {
   font-family: 'Playfair Display SC', serif;
   font-size: 34px;
}

That is, add the .single-post class to the front of the selector.