![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
October 25, 2022 at 11:35 am #1370131
Hi folks.
I see this happening with all my Special Headings: when you decrease the size of the screen, the font size used for the “subheading” sentence decreases (and this is good), but the line height is increased (and this is bad). It is noticeable when the subheading is a long sentence, and therefore it is split on two lines: there is too much space between these two lines.
This is not happening for the “heading” sentence, the line height remains the same.See in the example below:
As you can see, the heading is split in two lines fine, the subheading is split in two lines leaving too much space between them.
Do you think this can be easily adjusted?THX
Bye!
A.-October 25, 2022 at 1:35 pm #1370165Hey Angelo,
Did you try to set the line height for the tag in question under Enfold->Advanced Styling?
Best regards,
RikardOctober 25, 2022 at 2:44 pm #1370175Hi 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…
.av-subheading { line-height: 1em !important; }
Thanks!
October 25, 2022 at 4:00 pm #1370198Hi,
Thanks for the update. Could you post a link to where we can see the actual element on your site please?
Best regards,
RikardOctober 25, 2022 at 4:56 pm #1370210Sure! 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!October 25, 2022 at 7:27 pm #1370235Hi,
Thanks for that. Please try this in Quick CSS:
.av-subheading p { line-height: 22px; }
Best regards,
RikardOctober 26, 2022 at 8:54 am #1370261Fine, 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.-October 26, 2022 at 3:34 pm #1370315Hi,
Great, I’m glad that you found a solution. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardOctober 26, 2022 at 4:14 pm #1370326Close it, thanks Rikard!
Bye,
A.-October 26, 2022 at 4:16 pm #1370329Hi,
Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
AuthorPosts
- The topic ‘Special heading: subheading too tall when splitting on small screen’ is closed to new replies.