[ADBLParticipant]

Hi there —

Within (rev) sliders, I add a text layer, and whenever I need to change the color of a word, I add a <span style=”color:#FFFFFF;”>white words</span>.

For some reason, on lower grid resolutions, the span’s line-height is smaller that that of the container, so the text apears smaller than the parent div.

Any idea how to workaround this (generally, not just custom code on this page, since it’s everywhere)? Many thanks guys.

[ADBLParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add a class name to <span> tags, e.g :

<span class="rev-span">white words</span>

Then add following code in customizer:

.rev-span{
line-height:20px !important;
}

Hope it helps.

[ADBLParticipant]

Thanks, I tried but that didn’t seem to work.

Besides, I don’t want a fixed line-height, I want the span to inherit line-height from containing div.

So for example, if I set the line-height to 100px for the text layer, I need the span’s line-height to be 100px too.

Thanks you again.

[ADBLParticipant]

What feels odd is that if I resize the browser from a desktop computer, that won’t happen.

But using a laptop, all text spans are smaller than which of the containing div.

[RahulModerator]

Hey There,

Thanks for writing in!

Would you mind providing us a Screenshot of the issue so that we can take a closer look of it? It’d be helpful for us to give you a tailored answer.

Thanks for understanding!

[ADBLParticipant]

Hi there —

Thanks for your reply. I added one just upper in the thread.

[Nabeel AModerator]

Hi again,

There was a missing quote in your span tag, I went ahead and fixed it for you. Now the class rev-span should work. To make it consistent, add the following code in your Customizer:

.rev-span {
    line-height: 20px !important;
    font-size: 26px !important;
}

You can adjust the line-height and fonr-size as per your need. Let us know how this goes!

[ADBLParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for the detailed writeup! To make it inherit the container’s font-size then replace the previous code with this

.rev-span {
    font-size: inherit !important;
}

Hope this helps!

[ADBLParticipant]

Hi, I found out that I can use:

.tp-caption span{line-height: inherit !important; font-size: inherit !important;}

…directly within the slider’s custom CSS. It needs both line-height and font-size.

Thanks, tough!

[ChristopherModerator]

Please let us know if you have further questions.

[Author]

Posts