Special heading: subheading too tall when splitting on small screen

Hi Rikard and thanks for your help: I am talking about the subheading in the Special Heading component.
The Advanced Styling allows me only to setup the <H1> tag, but I need to change the SUBHEADING part of the Special Heading component (which is into a <DIV class=”av_custom_color av-subheading av-subheading_below”>), and only when the screen size is at “mobile size”.

In fact, with this CSS below, I can change the line height of the subheading for the upper part of my screenshot, taken when the scren size is “desktop size”. When the screen size reaches “mobile size” (the bottom part of my screenshot), the font size decreases AND it seems like my customization of the line-height is not working anymore, as you can see from the screenshot…

https://imgur.com/f7b8ZFe

.av-subheading {
line-height: 1em !important;
} 

Thanks!

Sure! Check this one out:

Simply resize the screen: you will see that the subheading “da Colle Garda a Colletto Taf via Monte Rena, Taille e Taf” will be split in 2 lines: until the moment when the font size is not decreased (screen width > 767 pixel), the space between the 2 lines remains acceptable.
When you reduce the screen size below 767, the font size decreases, and the space between the 2 lines is annoyingly large… it may be that the “line height” of that subheading remains the same IN PIXELS, while the font size is decreased. This is why you get that “distance” between the two lines. Just my 2 cents!

Fine, thanks Rikard! I had to restrict it to small scree size only, because when the subheading splits on larger screen size, 25px is too little :)

@media only screen and (max-width: 767px) {
.av-subheading p {
  line-height: 25px!important;
}
}

Bye!
A.-

Close it, thanks Rikard!
Bye,
A.-