In the theme customizer you can only specify H1 for desktop/tablet/mobile. H2~H6 work as a percentage based on H1 and the available space / column width.
You can specify all heading levels in each module for desktop, tablet and mobile . Best to do this as the default preset in each module type.
In Divi 5 there are more responsive levels and you can use global variables to manage them in a single place.
You can also use CSS like this, even better to use clamp() for responsive font sizes.
@media only screen and (max-width: 980px) {
h2 {font-size: 20px;}
}
@media only screen and (max-width: 768px) {
h2 {font-size: 15px;}
}Code language: CSS (css)
Size depends on column width
The header sizes are also based on the the width of the column in wich it is being used. So if you use h2 in a 1/3 or 1/4 column, the font size is smaller then when you use it in a 2/3 or 2/4 column.To make it the same size you need to give it a fixed size with CSS.
Note: you can give it a fixed size in the module settings as mentioned above.
/* -- Same size for h2 header font in all columns -- */
.et_pb_column_1_3 h2, .et_pb_column_1_4 h2 {
font-size: 26px;
}Code language: CSS (css)