LayerSlider - Responsive Text on Mobile

[3dlasermapping]

Hello

I’ve created some sliders using LayerSlider on my site. The text looks fine on desktop, but on mobile is tiny. Here is an example: https://www.3dlasermapping.com/content-hub/

I have selected the responsive option in the slider’s settings, but it makes the slider too large on desktop and makes no difference to the text on mobile.

I’ve been using LayerSlider’s own support with no luck, so I wonder whether it’s something to do with X.

Any help would be appreciated.

Thanks

[christian]

Hey @3dlasermapping,

Your text should wrap and not shrink. Would you mind giving us access to your WordPress admin so we could try replicating your setup?

Thanks.

[3dlasermapping]

Hi Christian

I sent you a private message with a login, did you manage to take a look?

Thanks

[Alaa]

Hi @3dlasermapping

Sending the login credentials in a private message isn’t the correct way for sharing such information as we work in different shifts and this information should be available to the whole team.

Please send the login credentials in a Secure Note reply to this thread, check this screenshot to know where you can click to post a Secure Note reply:

Thanks.

[Alaa]

Hi @3dlasermapping

I’ve checked your LayerSlider settings and I’ve added res_text as the h2 ID as in this screenshot:

Now, you can control the font-size on different devices screens by adding this CSS code to (X > Theme Options > CSS):

@media screen and (min-width: 767px) and (max-width: 900px) { 
    #res_text {
        font-size: 0.9em!important;
        white-space: initial!important;
    }
}
@media screen and (min-width: 400px) and (max-width: 767px) {
    #res_text {
        font-size: 0.6em!important;
        white-space: initial!important;
    }
}
@media screen and (max-width: 400px) {
    #res_text {
        font-size: 0.7em!important;
        white-space: initial!important;
    }
} 

Feel free to change the font-size as you want per device screen size.

Thanks.

[3dlasermapping]

Hi Alaa

Unfortunately the font is still tiny on mobile, take a look at this screenshot below.

Any more ideas? I did this around ten minutes ago so perhaps I need to wait for the changes to update?

Thanks

Harriet

[friech]

Hi Harriet,

Actually your slider font is too big on my end because you set it at 10em

Please adjust it where you see it fits. Also, please clear all your caching/optimizer plugins and your browser cache before you preview the page.

Cheers!

[3dlasermapping]

Hiya

I’m not seeing what you see I’m afraid! I’ve cleared the cache on my iPhone and am still getting tiny text. I’ve also put it through a mobile visualiser and am getting the same, except the low-tier phone which looks like the one you’ve shown. Screenshot attached.

Thanks

Harriet

[Alaa]

Hi @3dlasermapping

Although I agree with @friech that 10em is very large to be displayed on mobile phone screens, but you are right the Custom CSS code you added in (Theme Options > CSS) isn’t being rendered on your website yet.

This could be due to two things:

• Your website is hosted on WP-Engine, it has its own caching system, you can see that in (WP-Engine > Settings), make sure you cleared cache from there.
• You have installed “Leverage Browser Caching”, I’m not sure if you can delete cache from this plugin or not? try to disable this plugin and recheck this issue.

Thanks.

[3dlasermapping]

Hi there

I’ve removed 10em from the CSS and gone back to the values @friech posted, I’m not familiar with em measurements so wasn’t too sure what I was doing.

I’ve also cleared my WP Cache and temporarily disabled Leverage Browser Caching, but it’s still looking tiny on mobile! I did this about 20 minutes ago, so maybe waiting a bit longer for the changes to take effect will work? Maybe I’ll switch my computer on and off too.

Hopefully we can get this sorted as it’s becoming a bit annoying!

Thanks for your help anywyay

[christian]

Hey @3dlasermapping,

The code @Alaa gave works.

However, even if it works, just take a look at the space around your text. Even if you increase the font size, your next problem is your text will overflow. Your setup isn’t simply a matter of font size. You need to take into account spacing also so you need to reduce the number of text.

For this, I’d recommend that you use Slider Revolution as it has more options for Responsive Text. See https://youtu.be/SVYuO2rlId0

Thanks.

[3dlasermapping]

I still can’t see that the CSS is working at my end, the text is still tiny on mobile and I’ve checked on several devices in the office. If I could actually see the size of the text then I could reduce it and/or make the appropriate edits elsewhere. Why can’t I see what you guys are seeing?

We used Slider Revolution before and thought it was poor so moved over to LayerSlider. We’re not going to go back to Slider Revolution I’m afraid.

[christian]

Hey @3dlasermapping,

As you can see in the screenshot I gave previously, the font size you’ve set in mobile is 0.5em. That equates to 8px which is very small. There’s no good way to achieve this in LayerSlider. If using Slider Revolution is not possible, you need to consider other options or another plugin that can achieve what you need moreover that we could not continually give you custom CSS because that is outside the scope of our support.

Thank you for understanding.