-
Posts
-
Hi Enfold Support,
As usual, thank you for all the great support and the awesome theme. Excited to see the next update integrating with Gutenburg. So far there’s mixed reviews so we’ll see.So we’ve been struggling with line height issues with the layerslider for the past year. It seems that one of the updates along the way broke the line height feature of the plugin. Not sure if that’s a LayerSlider issue or Enfold.
There are several places to adjust line height but i’m not sure which overrides which. Custom CSS with !important tag, Layerslider editor (text layer within a slide), Enfold styling for h1, h2, etc etc.
Private info below to see the issues live.Hey Eric,
Thank you for the login, I looked at your layerslider on your homepage, which looks great, but I assume that you want the line height to be a little more, right?
I see that currently, according to the inspector the text is:
font-size: 28.672px;
line-height: 40.96px;
But it looks like the line height is really a lot less than that. Do I understand this issue correctly?Best regards,
MikeHi Mike,
Yes, you are correct. It seems that what’s appearing on the page isn’t what is designated in Layerslider under the styles attributes settings. I do know the fnnt size and line height will adjust as the screen/browser expands or shrinks but the size and height should be proportional. We have set 60px for line height but when the slider renders in a browser it reverts to what you’re seeing in the browser inspector at much smaller. Seems to be the same height across the board on all sliders we’ve created. Regardless of font size or line heights designed in Layerslider, the line heights revert to some preset height that doesn’t change.I’m assuming the line height in layer sliders would override all other theme related line height designations?
https://www.dropbox.com/s/asnk8imjvy0bjqq/layerslider-setings.png?dl=0
Thank you,
EricHi,
The line height in layer sliders should not override all other theme related line height.
I see today it looks much better, setting the line height in the layerslider is what I would have suggested.
Does this meet your needs now?Best regards,
MikeThrough some detective work, I figured out more specifically where the problem lies with the line height and layerslider ignoring its own text styles. Whenever you use opening text transition enabled and apply animation, the text ignore certain text styles–in this case line height. I disabled open text transitions and the line height went back to normal. Ugh, what a pain. Is this something the theme is affecting in Layerslider or a bug in Layerslider? Any ideas of how to fix? Be great to be able to start applying text animation to our sliders. Thanks!
Ha, we’re cross messaging. The problem still exists. See my previous post. Appears to be a bug in Layerslider or Enfold but enabling opening text transitions in layerslider forces the slider to ignore line height specifications in text styles set in layerslider.
Hi,
Ok, I took a look but I was not sure about the settings you had before and I didn’t want to mess up your work, so can you clone the slider with the settings you want and name it home-test and add it to a test page for me please.
I want to try overriding the line height by adding some classes to the text layers, or the whole slide, or perhaps test some changes.
This way if I mess it up it’ll be ok, but if I can fix it we can repeat the steps on your real slider.Best regards,
MikeI just set up a test page with a clone of the slider. The url for the slider’s setting page is also included. All are included in the private section. Let me know if you need anything else to help troubleshoot. Please note we’re doing a bunch of development on the version of the site so let me know if you need to update any of the custom css or anything else that may affect the rest of the site. Thanks!
Hi,
I believe I have found the issue, it seems that the layerslider places the text in a div with the class “char” for the animation that you are using, and Enfold has a rule in the base.css that gives div all font styles “inherit” including line-height, so this rule fixes the issue:h1.ls-layer div.char {line-height: 1.3 !important; }I tried placing it in the layerslider styles, but it didn’t work, so I placed it in your WordPress > Customize > Additional CSS and now it’s working.
Please clear your browser cache and check.Best regards,
MikeThanks Mike! This worked perfectly. Should I have any concern with future updates to LayerSlider and or Enfold? Can I simply change the line height in Advanced Styling for the h1 fonts? We’re in the process of cleaning up our massive custom css file if possible. Thanks again. As usual Enfold support is 50% of the reason it’s the top theme for WordPress. :)
Sorry, I now see you put it in the wordpress custom css. Which is fine. Again any way to correct this in advanced styles and or our child theme so what we specify in layerslider will be recognized by the browser?
Hi,
The styles in custom CSS will also work in child theme styles or advanced styles. Please feel free to move it to either of the places where you feel it is easy to access :)
Let us know if you have any issue.
Best regards,
VinayThanks Vinay. Just so I understand, where is the line height for H1 within layerslider originally oontrolled from? Advanced styles settings? Is there a bug fix to allow animated (open transition) text to recognize line height settings in layerlsider or will custom css hacks be the only way to fix? Thanks!
Hi Eric,
The settings from the Advanced styles settings do not really affect the Layer Slider, it has its own styles, but the code you put in Quick css will affect the Layer Slider if you target its selectors right.
If you need further assistance please let us know.
Best regards,
VictoriaOk so we have to use custom CSS to set the line height for Layerslider when using Open Transition animation for text? This means any line height settings used in LayerSlider will be ignored. Is this a LayerSlider plugin issue or an Enfold issue? I’m assuming you understand no one will know the solution unless they come across the fix you shared in this support thread. I’m just trying to save other Enfold users the hassle of figuring this out. Without seeing this thread they’ll be as confused as we were and since this fix sets the line height to 1.3em (or whatever is placed in the custom css), all line height designations in the layerslider text styling settings will be ignored. Again, just trying to help other Enfold users using LayerSlider. Or maybe I’m missing something here.
Hi,
I have read your last few replies and have looked into this a little more, and will try to explain.
This layerslider effect places each character, word, and line inside of div’s inside of the H1, like this:<h1> <div class="line "> <div class="word "> <div class="char "> ... </div> </div> </div> </h1>So in the layerslider styles, or should I say your custom choice from within the layerslider, the H1 has a line-height of 40.96px
but the div’s has a line-height of 28.67px (1em)html * div .avia-layerslider .ls-wp-container .ls-layer > *, body * div .avia-layerslider .ls-wp-container .ls-layer > *, #ls-global * div .avia-layerslider .ls-wp-container .ls-layer > * { line-height: 1em; }So this is a layerslider issue, the H1 line-height is not carried down to each character because of the div line-height.
Perhaps this has not come up before for the layerslider team because other people were fine with the line-height, or perhaps it has come up before but I didn’t find the support thread.
But for your situation and your slider, the custom css seems to be a good solution.Best regards,
MikeThanks Mike. Makes sense and I’ll check with Layerslider for a long term fix. This is helpful and will help others understand the issue when searching for a solution. I can’t imagine this is the first time this issue has come up.
Hi Mike,
Would you happen to know what the div code is for opening transitions using words or lines instead of just characters like we’re using. We changed the opening transition to appear by word and the line heights broke. Any way to simply apply the fix you provided to all opening transitions?
Thanks!
EricHi,
I took a look at your slider but it looks like it is still using the “.char” div, but I noticed that it is using a H2 instead of the H1 that I wrote the css for.
So you could copy the rule and change it to use with the H2.
Another option would be to try overriding the layerslider rule that is causing the issue, like this:html * div .avia-layerslider .ls-wp-container .ls-layer > *, body * div .avia-layerslider .ls-wp-container .ls-layer > *, #ls-global * div .avia-layerslider .ls-wp-container .ls-layer > * { line-height: 1.3em !important; }Try changing the 1.3em to suit, and add to your WordPress > Customize > Additional CSS, as this css location overrides all other css.
Best regards,
MikeThanks Mike! We’ll give it a shot. Regarding custom css, you’re saying that wordpess’ custom css will overrode enfold custom css? Better to use that location for this problem than enfold’s custom css file?
Btw Kreatura is investigating this issue as well. Couldn’t tell from your initial research if this was a bug with Enfold or LayerSlider. Kriesi may get a call. ;)
- You must be logged in to reply to this topic.