H2 tag has different size when used in Accordion

Using Concrete / Help
1

A kitchen sink question, I know…

I have a H2 title set to 20 pixels. It shows in a normal text correctly as 20px. But why is a H2 title in an accordion 2 pixels less?

Tested also with different sizes, and when applied in the elemental or atomik theme always about 10% smaller.

Is it a Concrete or a Bootstrap Issue?

Does anybody know or has a fix?

2

You should be able to find your answer by looking in the browser developer console, elements tab.

You may need to disable your site cache to get a more granular answer.

3

Thanks John, I found it.

In my css i had set H2 font-size to 20 px, in the accordion css I have 18px.
The accordion interface lets you choose title size, which is in my case set to H2. But for some reason, accordion would not accept this setting. You have to exactly mach your H2 settings from your basic typography settings.
I also found, that if you comment out certain settings in your accordion css, then generic bootstrap5 values apply.

If that is a clear Concrete issue I cannot tell.
Anyway, accordions behave weird and need tinkering to adjust.

4

With that in mind, you could create a custom template for the accordion block, to set the size of the h2.

5

For other users with this problem, here’s the github issue, although no solution yet:

6

I just style these out in my css for every project.