Text decoration (bold, underline) changes font size in revslider. How to fix?

Support
#1

I just need to add text decorations to single words in text elements in revslider.
But when I do, it decreases the font size of that word on the front end.

I tried < u > text < /u>
as well as < span style=“text-decoration: underline” >text< /span>
both decrease size, the latter more so than the former.
(spaces added just to make code visible here)

http://turquoiseprimarycare.com/

#2

Hi There,

Which text you want to add the underline?

Could you please share us with your admin account so we can take a closer look?

Thanks.

#3

okay, strangely, it now appears fine in web browsers. I don’t why I didn’t change anything.
But it is still wonky as hell in mobile browsers.

In one slider (‘About’) I tried underlying the word “patient”
and in another (‘about2’) I tried underling “Turquoise Trail is open on weekends”
and on mobile device it still makes the word smaller,
and in the second case (about2) minuscule like 2px font size.

I also tried adding
text-align: center;
to the Text Style - Advanced CSS - layer , which works in the editor but not on the front end.
How to center text?

#5

Hi,

Can you provide us the name of the slider and the url of the page where we can see the issue.

For the mean time you can try clearing your mobile browser cache and check again.

Thanks

#6

http://turquoiseprimarycare.com/

In one slider (‘About’) I tried underlying the word “patient” and in another slider (about2) I applied a “loop” animation to the text layer that says “Turquoise Trail is open on weekends.” Either text decoration or applying the loop animation makes the text minuscule and unreadable in all mobile browsers I tried (Chrome, Firefox, Edge). Caches are cleared.

Thank you for assistance.

#7

Hello There,

I edited one of your slider and I added this:

<span style="text-decoration: underline;">Turquoise Trail is open on weekends</span>

After purging the cache, I viewed the page. I do not see any font size change:

Please check your site again.

#8

Did you try mobile browsers? As I said a couple times, it works in desktop browsers, but not in mobile browsers, even after clearing cache of mobile browsers.

#9

Hello There,

There was something in that layer that will transform in mobile browsers. So I deleted the layer and duplicated the other layer instead. I changed the text and now the have same settings.

Hope this helps.

#10

That seems to have worked, thank you!
Can you tell me what that “something” was that you deleted? I still have the same issue on the slider right before the one you fixed (“about”), where the word “patient” is underlined and ends up tiny on mobile browsers.

#11

Hello There,

This is what I did.
1.) I simply deleted the layer text “Turquoise Trail is open on weekends.”
2.) I duplicated the text layer “and we accept…” and replace the text with “Turquoise Trail is open on weekends.”

Please check out your “patient” layer and apply the same.

#12

I tried deleting and recreating the layer (in slider “About”), but it still makes the underlined word “patient” microscopic on mobile.
Can you please help me find a solution?
Thank you.

#13

Hello There,

The layer in About slider is different. It is only one whole text layer and apart of it is the “patient” word. In the other slider, the whole phrase were having the underline. To better resolve this one issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body #slide-61-layer-27 u{
    line-height: 11px !important;
    font-size: 9px !important;
}

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

#14

Thanks for suggestion but code had no effect. I tried entering in “global css” in theme options, as well as “custom css” in content editor. What else should I try?

#15

Hi there,

Please try this one,

body #slide-6-layer-27 u{
line-height: 11px !important;
font-size: 9px !important;
}

It’s 6 and not 61, looks like the ID has been changed.

Thanks!