Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
The text alignment problem is related to how you set up your text layers. You shouldn't use HTML code in this case, nested HTML content in a layer might not always work as intended, and it will likely lose its responsive behavior or position as well.
Instead, I'd recommend to use the plugin's built-in options to format your layers. You can create text layers, only enter the text itself and use the options in the Layers section -> Styles tab to achieve the same layout. You can center your text the same way there.
Regarding the images, I have checked your site, but they are positioned correctly for me. The gap is there on the front-end as well.
Different layers can have different line-heights. We recommend you to use any paragraphs as separate layers. In this case you can also set the positions of the layers separately.
We're having the same issue and through some debugging found where the issue lies. We're currently using the Enfold theme and up until some updates (can't tell if it was LayerSlider or Enfold), the line height issues started. Probably about a year ago.
Basically, whenever we apply opening transition animation to a text layer, any line height designations we make in the editor are ignored within the browser. Although when viewing slide animation in layerslider within preview the line height looks fine--just as the original poster experienced. With some troubleshooting with Enfold support we came up with a hack fix, but it's not complete. We have a "typing" animation on the text layer in our slide where it has each character appear quickly. To maintain the line height we want we've added this snippet of CSS to the custom CSS editor for WordPress or the theme (works either way but not if we apply to the custom CSS in LayerSlider).
The problem is that this only fixes when we use the open transition by character animation. If we decide we want to have text transition in by an entire word or line, the line heights break and are again ignored by the browser (this occurs safari, chrome and firefox on mac).
Can you recommend a fix so that the line height designations made in the layerslider text styling editor are not ignored by the browser as we're seeing?
Here's the part where they identify the problem and provide a quick solution but not a full fix:
"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:
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."
I'm not sure if this is an incompatibility between Enfold and LayerSlider but hoping we can find a fix as we love both of what you guys provide.
Lastly, what's the div code for word and line animations? Many thanks for any help you can provide.
Why is this alignment of some elements different between the preview in Wordpress and then in a browser ?
see attached screenshots
- Space between bottom right images existing in preview but has disappeared once displayed in a browser
- Text centered in preview but not when displayed in a browser
Thank you for your support
Lumspa
Hello Lumspa,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
The text alignment problem is related to how you set up your text layers. You shouldn't use HTML code in this case, nested HTML content in a layer might not always work as intended, and it will likely lose its responsive behavior or position as well.
Instead, I'd recommend to use the plugin's built-in options to format your layers. You can create text layers, only enter the text itself and use the options in the Layers section -> Styles tab to achieve the same layout. You can center your text the same way there.
Regarding the images, I have checked your site, but they are positioned correctly for me. The gap is there on the front-end as well.
Thank you Attila,
But is there a real editor available in the builder... ?
How defining 2 different line-heights : (How to attach a file on a reply in order to show what I mean ?...)
- one specific between 2 paragraphs
- another between the lines within a paragraph
thank you for your help
Lumspa
Hello lumpsa,
Different layers can have different line-heights. We recommend you to use any paragraphs as separate layers. In this case you can also set the positions of the layers separately.
Best Regards,
George | Kreatura Dev Team
We're having the same issue and through some debugging found where the issue lies. We're currently using the Enfold theme and up until some updates (can't tell if it was LayerSlider or Enfold), the line height issues started. Probably about a year ago.
Basically, whenever we apply opening transition animation to a text layer, any line height designations we make in the editor are ignored within the browser. Although when viewing slide animation in layerslider within preview the line height looks fine--just as the original poster experienced. With some troubleshooting with Enfold support we came up with a hack fix, but it's not complete. We have a "typing" animation on the text layer in our slide where it has each character appear quickly. To maintain the line height we want we've added this snippet of CSS to the custom CSS editor for WordPress or the theme (works either way but not if we apply to the custom CSS in LayerSlider).
/* LAYERSLIDER LINE HEIGHT FIX */
h1.ls-layer div.char {line-height: 1.3em !important; }
h2.ls-layer div.char {line-height: 1.3em !important; }
The problem is that this only fixes when we use the open transition by character animation. If we decide we want to have text transition in by an entire word or line, the line heights break and are again ignored by the browser (this occurs safari, chrome and firefox on mac).
Can you recommend a fix so that the line height designations made in the layerslider text styling editor are not ignored by the browser as we're seeing?
Here's the support thread with Enfold so you can get caught up with the issue: https://kriesi.at/support/topic/line-height-not-working-with-layerslider/
Here's the part where they identify the problem and provide a quick solution but not a full fix:
"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."
I'm not sure if this is an incompatibility between Enfold and LayerSlider but hoping we can find a fix as we love both of what you guys provide.
Lastly, what's the div code for word and line animations? Many thanks for any help you can provide.
Thank you for the feedback and reaching out to us. I'll forward this to the dev team so they can have a look.