CSS Override for H1 not working, any Ideas?

Helpdesk Website Builder
1

Hello Community,

Unfortunately, it’s not possible to directly change the font size of H elements for an individual element, like you can with the color.

OR IS IT? If so, my problem would be easily solved.

Instead, I’m trying to override an existing H1 with a CSS class to change its appearance. But I’m not succeeding.

.custom-h1 {

font-size: 20px !important;

color: #352b25 !important;

}

Interestingly, when I apply it to menu items, the font size changes, but the color doesn’t. When applied to H1, nothing changes at all.

Important: the overall design should remain unchanged; I only want to make localized modifications.

Does anyone have any suggestions?

2

Best quick test: open DevTools → inspect the “H1” text → check Computed → color / font-size and see which selector is winning. Then match that exact element (h1 vs wrapper vs span) and beat it with a slightly more specific selector.

Hey @ Dirk_Matthes1, you can give us your url so I can try and make those changes in Dev tools and guide you exactly !

1 Like
3

If you like, edit your post with some screenshots and a walkthrough, maybe? I think this might be a great help for non code users as well?

4

Thanks a lot @Kalisperakichris , tested it today and found a way, based on your recommendations.
Sitejet puts my custom css class to the div wrapped around the H1.

Bildschirmfoto 2026-03-04 um 10.18.48

It works if I add h1 as selector (the same way works for other headline, e.g. h2).
.custom-h1 { → .custom-h1 h1 {

One other important thing is, to define the different sizes depending on the mediatype.
I’m just unsure whether the two @media statements are sufficient.
For all who have a similar use case see the code below:

.custom-h1 h1 {
  font-size: 24px !important;
  color: #352b25 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .custom-h1 h1 {
    font-size: 20px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .custom-h1 h1 {
    font-size: 20px !important;
  }
}

@Andre maybe in the future you can add the possibility to change H element size directly, like it is possible for regular text elements and also H elements in richt text elements?

The use case that I think affects many here is SEO.

I naturally want to define my H1, H2, etc. globally for the page design.
However, there are pages where I have to differentiate between visual presentation and technical implementation.

So instead of H1 followed by H2, I construct it technically as follows:
Text element (visually like H1) followed by H1 (visually like H2)

Or are there already other ways to solve this?

5

Hi Dirk!

The following might work:
The H1 element is usually inside a div with its own unique id. Targeting that specific div and then the H1 inside it might work, for example:

#ed-1234567890 h1 {
    font-size: 12px;
}

This should only change the H1 font size for that specific element, and not globally.
Where to put this CSS? Actually, I don’t know, but I suspect it might be best to add it to your global CSS at the very end?

I hope it works.
:crossed_fingers: