How could i make the RevSlider Font ( appear ) Same on all devices, using Renew ( Home Product ) Slider? ( and a second question about the button mouseover )

Hi there,

I am using the Renew Home Product slider as the basis for my own, and the Font keeps changing using different devices

2nd Question ( regarding the same template ) I used the Button ( with the Thumb Up icon ) as the basis for my current button, and it will only Interact with the user when mouseovering to its right side

The selection works fine on Mobile devices, but on desktop it does not register the mouseover

How could i get the Font working on all devices ( i tried the Responsive Size&Pos > Responsive Behaviors > Responsive Children OFF, Responsive Offsets OFF ) ?

And how could i get the mouseovering over the icon to respond fully ( now you have to pull mouse over it from right and beneath the icon )?

Hey Jussi,

Regarding the 1st question:

Are you referring to the font size? If so, that’s because the slider is auto-responsive and it takes the aspect ratio of the slider content into account. I’m not sure how you want the text to behave so I’d recommend that you watch the following Slider Revolution Responsive Text tutorial video.

I’m not sure what you want with the button. Do you mean the icon should only show up on the right side when the button is hovered? If that is the case, replace the current button with a Button layer with icon animation.

You should be able to see which buttons has an icon animation by hovering over the buttons in the button picker.

Let’s please resolve 1 issue at a time to avoid confusion later down the road.

Thanks.

Hi Okay,

Let s stick to one question at a time i agree

The issue is not that the font is responsive - this is what i want, but the font changes to a different font on mobile devices and i want it to be the same

And apologies for the messy topic

I feel Revslider is very confusing ( and nearly forces the user to experiment with things and blocks that should be left untouched )

So yes i will also watch the tutorials

( but if you can check what i mean about the font, i would appreciate it - it seems like revslider breaks very easily so i would rather not experiment with the template a whole lot - the font changes on iOS devices - to so small you can not read it - it has wrong font on iOS devices - all is set to responsive and when editing the font on desktop it flickers to the wrong font when editing - yet shows corretly on desktop, even if you save it while it shows the wrong one in the editor )

Hi Jussi,

I can’t replicate the font issue on my end, on my end the Headline stays at “Arial Black” desktop and mobile, and the subheadline stays “Tahoma” desktop and mobile, was not that the font you intended? Please clarify, and please try with a different device, maybe the issue is specific to your mobile device.

Regarding your button issue, please move your button layer above all other layers. As you can see in the screenshot below, part of your button is covered by the image layer (microphone), that is why you cant hover that area of the button.

Cheers!

Hi there,

thank you so much, i will check the settings

You’re welcome, Jussi.

Hi there,

Thank you again. And as to answer to your questions yes the first font is the correct one, but that is the issue, as it is shown differently on iOS Devices. I checked with several devices and on all of them ( no matter what the browser ) that Arial Black font changes to small or thin on iOS yet it is Bold and like it should be on Desktop

iOS:

And the Button is fixed, thank you greatly for your support!

Hey Jussi,

That will be the case for iOS because Arial is not available in that OS so it falls back to the default sans-serif font of iOS. That’s normal. To display the same font cross-browser, you need to use a Google Font or a self-hosted font.

Hope that helps.

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