-
AuthorPosts
-
February 8, 2023 at 10:44 am #1397125
Hi Enfold team,
I would like to have a smaller line height in the Header title. I have tryied to use several css, but I can´t achieve that.See the screenshot here: https://snipboard.io/WuXgMJ.jpg
If you need, credentials in the Private Content.
Thanks a lot,
ZdenekFebruary 8, 2023 at 6:32 pm #1397209Hey Zdeněk,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .title_container .main-title { line-height: 1.2em; } }
Best regards,
RikardFebruary 13, 2023 at 4:32 pm #1397778Hi Rikard,
thank you for your help, but it does not fit as I imagine.With your css code, the Title line heigh is ok, but there is a problem with the breadcrumbs. On the same screensize (< 479px)
1. The breadcrums are too close to the Title see here: https://snipboard.io/84dV9P.jpg
2. and the ones are too far to the Title; see here: https://snipboard.io/Gby3Pz.jpgIt depends just on screensize. I have played with some css but I can´t find the right way how to do it.
Thank you.
Br,
ZdenekFebruary 14, 2023 at 6:35 pm #1397971Hi,
Please try this instead:
@media only screen and (max-width: 767px) { .title_container .main-title { line-height: 1.2em; margin-bottom: 12px; } }
Best regards,
RikardFebruary 15, 2023 at 8:24 am #1398022Hi Rikard,
thank you for your css code update, it works, but only on the screensize smaller than 369px … between 370px and 767px there is too big gap between the title and breadcrumbs (when the title is in one row); see here: https://snipboard.io/WAfjCI.jpgYour css solution also depends a lot on how long the Title is. The behavior I describe above applies to the article https://blog.mtsakademie.cz/hubnuti/jak-co-nejrychleji-a-efektivne-zhubnout/
.. but if I check it in another one (https://blog.mtsakademie.cz/cviceni/hledate-skvele-cviceni-v-praze-13/), it behaves a bit different => The title and breadcrumbs go in two rows in a different screensize (logically) and this css solution does not cover different cases of title or breadcrumbs lenght.Just for a wider explanation:
I understand css coding (I am not a professional coder, but lets say a very skilled amateur 😊) and I have tryied several css combinations including „margins“ etc. to achieve this.The problem is, that the Title and breadcrumbs are wrapped in the same „Title container“ and they are infuenced each other by the css line-height. So if you change the line-height in the Title, it also influence the breadcumbs => the gap between the Title and the breadcrumbs increases (in the case the Title is in one row).
If I try to change the line-height also for the breadcrumbs, a lot of other style problems arise there.
Of course I can adjust the css code for each article and also for each screensize separately, but that´s not what I am looking for.
I am looking for a general solution which will work with all types of title and breadcrumbs lenght regardless of whether they are in one or two rows.Thanks a lot,
Zdenek- This reply was modified 1 year, 9 months ago by Zdenek.
February 15, 2023 at 6:39 pm #1398113Hi,
I can’t really give you better solution, since there’s no way of knowing when they switch to two lines. That depends on the length of the text. I checked both the articles you linked to just now, and it looks pretty good on my end. You can add more media queries if you need further settings on a specific screen width.
Best regards,
RikardFebruary 16, 2023 at 11:45 am #1398201Hi Rikard,
thanks for your response, I understand. I have thought it will not be easy/ possible to find some elegant solution, but I have tryied to ask :)No problem, I will solve it by adding more media queries.
Br,
ZdenekFebruary 16, 2023 at 7:11 pm #1398251Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardFebruary 16, 2023 at 7:34 pm #1398258Hi Rikard,
you can close the thread.Br,
ZdenekFebruary 17, 2023 at 3:26 pm #1398357Hi,
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 ‘A smaller line height in the Header title’ is closed to new replies.