Text size of revolution slider gets changed in mobile view

Support
#1

The text shown in blue color gets very small in mobile view. Please let me know how to fix this.

#2

Hey @rajitha1114,

Regretfully, we won’t know the cause of your problem by looking at the screenshots alone. Please give us the URL of the page also.

Thanks.

#3

Hi,

I have sent you the link.

#4

Hi There,

You can use the visibility option to ad a bigger text only for the mobile device and hive the original one.

Just select the text and hide it in mobile device add another text layer with the same content and hide it in a larger screen.

Hope this helps!

#5

Hi,

No, I cannot do like that, since this only happens to a part of text

#6

Hi @rajitha1114

I’m sure that following this video tutorial should help in resolving this issue:

Please let me know how it goes,
Thanks.

#7

Hi,

Thanks for your reply.
My issue is with text size of part of the text getting changed in mobile view.
As an example, when the text is entered as “SEWAGE TREATMENT PLANTS”, The Plants part is displayed very small in size. I need the text in two colors, in the same text layer.
I hope you can understand my issue now.
I think this must be changed in the coding level.

#8

Hello There,

Thank you for detailed explanation of the situation.
To adjust font size for part of a text only, please add class to it. For example, wrap it in a span tag like this:

<span class="text-adjustment">PLANTS</span>

Then use custom CSS to adjust text size on certain view like below:

@media (max-width:480px){
    .text-adjustment{
       font-size: 18px !important; /*Please adjust this value accordingly*/ 
   }
}

Hope this helps.

#9

Hello,

I dont want to adjust the font size for part of text. I want the text size to remain the same as desktop view. Hope my issue is clear now.

#10

Hello @rajitha1114

That’s the code you need to prevent this from happening:

@media screen and (max-width: 680px){
    .tp-mask-wrap strong {
        font-size: inherit!important;
    }
}

You can add it to (Theme Options > CSS) section.

Thanks.

#11

Hi,

I added it, but still no success

#12

Hi @rajitha1114

I believe the code should work fine, please check this screencast:


To allow us investigating this issue, please provide us with WordPress Dashboard login details in a "**[Secure Note](https://snag.gy/Fxd6j9.jpg)**".

Thanks.

#13

Hi,

I added it herewith

#14

Hi @rajitha1114,

It’s due to classes of the layer and it’s different from each slides. Please change the provided CSS to this

@media screen and (max-width: 680px){
    .tp-mask-wrap strong, .tp-caption strong {
        font-size: inherit!important;
    }
}

If another text is different then you’ll have to add more with applicable class.

Thanks!

1 Like
#15

Thanks this works !!

#16

You’re welcome.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.