Layerslider mobile issue - font size and line breal

[k3441]

Hello,
I’ve ready through the other posts for the layerslider mobile issue but can’t get mine working.

Basically I took their demo and made some mild alterations and hoped it was going to work out of the box. The font is very small and there are odd breaks in the copy. The only non-themeco plugin i’m using is a language translation which didn’t seem to have any effect when I deactivated it. Any guidance would be greatly appreciated .

[ruenel]

Hey @k3441,

Thanks for writing in!

Please edit your slider and click on the text layer. You should be setting a minimum font size both for the desktop and mobile or smaller screens.

Hope this helps. Kindly let us know how it goes.

[k3441]

Thank you so much! I was going crazy looking for that. One last (I hope) question. I removed the buttons since the mobile experience doesn’t really need it, but how can I correct the breaks in the text? It’s not copied and pasted. It’s only on the mobile. Thank you so much - you are the best!

[marc_a]

Hi @k3441,

It seems that it is just a cache issue because when I tried to re-save the layer slider settings. The text minimum font size is now reflecting properly on the mobile view.

Hope that helps.

[k3441]

Hi Marc,
Yes, the size issue was solved but it has odd line breaks mid-sentence after the words to, your and the. Any reason that would happen? I typed it directly into the field with no line breaks. Thanks!

[marc_a]

Hi @k3441,

The issue is with the text in the mobile is about the word wrap functionality. I suggest that you disable it.

It creates lines per break in html DOM that’s it is showing odd in the mobile screen. To fix your issue, we need to override it through CSS.

First, I suggest that you add a class to your text layer. For example, I added intro-copy.

Then you should add this CSS code in your X > Theme Options > Global CSS..

.intro-copy .line {
  white-space: pre-wrap;
}

Expected Result should be:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[k3441]

Thank you SO much! Your directions were perfect and I really appreciate the screen shots. You both were super helpful and I sincerely appreciate the prompt assistance!

[friech]

We are delighted to assist you with this.

Cheers!