Safari iOS and phone number

[anni]

Hi!

I have a page www.motorhome.fi/etusivu

When I see it with iOS Chrome, all is good vs. desktop.

But with Safari, there is problem. The phone number does not show until mouseover/click. Chrome works well. The phone number is very important issue with the page.

Other problem is that my client can not see the word ENNAKKOMARKKINOINNISSA! as whole. I have a same phone (iOS 6s) and I can see all. He’s using Safari. Any idea why this is happening?

Thank you for the help!

[friech]

Hi There,

Thank you for writing in, for iOS number color, please add this to Theme Options > CSS

<!-- iOS number color -->
a[href^="tel"] { 
    color: red; 
}

Replace the red value, to the color you need.

Regarding the ENNAKKOMARKKINOINNISSA! I can’t replicate that issue on my end either. But try applying a Responsive Text to it.

Let us know how it goes,
Cheers!

[anni]

Thank you! I got the color changed. But the responsive text, I don’t understand this part at all:

2Simply give the heading you want to target a unique selector, and then target it with the shortcode. For example, let’s say that you wanted to target all of the headings on a particular page, you could give them all a class of responsive-heading (e.g.

I’m a Heading!

) and then target this heading with the [responsive_text] shortcode like so, [responsive_text selector=".responsive-heading"]. Make sure to include the proper selector when using IDs (#) or classes (.) with this shortcode. Note that this feature should typically only be used on heading text as using it on body copy or multiple paragraphs can be resource intensive."

Where I need to put “class” and the “target”, is that js code?

[friech]

Hi Anni,

Sorry for the confusion please forgot the responsive shortcode and let’s use the in-page Responsive Text Setting (its the same feature).

On the Cornerstone please see the Settings > Responsive Text

Then add a .responsive-heading on the selector.

Play with the Compress, Minimum size, Maximum size option until you get the desired look.

Then on your Text Type element (heading), apply the CLASS responsive-heading on it.

Then save, you’ll see that your heading will decrease-increase the size depends on the screen-width.

Hope that shed some lights,
Cheers!

[anni]

Thank you!

[rad]

You’re most welcome!