Content Area Modal Not Showing on mobile

[wolfproductions]

Hi,

Hope you can help with this please?

I have added a ‘Content Area Modal’ in the header of my new site, on my iPad and Phone it doesn’t display, but it’s fine on a PC.

It’s not hidden in anyway in customise… either via the container or the element.

This is the staging URL: http://wolfproductions-new-co-uk.stackstaging.com/

Any thoughts? I am puzzled!

Thanks

[christopher]

Hi @wolfproductions,

I checked your website, and at the top right section, there is an email icon and a phone number. Both of them work with no problem in smaller screens while I checked.

The only thing I see is that there is a Javascript error which is caused by an external JS file:
https://www.msghero.com/assets/remote/msghero_widget.js

That might cause issues, but I could trigger the modal with no problem.

Would you please tell us which iPhone or iPad you checked the case with? Would you please use another device to test the case?

Thank you.

[wolfproductions]

Thanks Christopher,

It is very odd as I know it’s there as if I click on the blank space it opens the modal.

It’s an iPhone SE and IPad Air, have cleared history on both devices. Could it be an IP issue with the connection or something, really confused.

[christopher]

Hi @wolfproductions,

Now I see what you mean. The problem with the phone number that you add is that mobile Safari browser detects that as a phone number and that is why it turns the text to link. And it seems that on your options the link color is the same red color of the top header background red.

You have two choices:

• Change the number in a way that the mobile phone can not detect it is a phone number by adding additional characters such as (- or ,).
• Disable the phone detection feature. Follow the steps mentioned below to do so:
  https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari

Thank you.

[wolfproductions]

Thanks Chris, is there a way I can add ‘.’ on the end of the number but have it has a different colour? That would be the easiest way I think, I can then just adjust the right hand padding accordingly.

Thanks for you help

[paul.r]

Hi,

You can change the link color of your content modal using css.

Please add a class to your content modal element.

Then add the code below in Theme Options > CSS

.my-modal a {
    color:#fff !important;
}

Hope this helps

[wolfproductions]

Hi Chris,

It’s only the ‘.’ that I want to add at the end of the number (to stop it being a number as far as iPhone / iPad is concerned that I need to change though, not the number, how do I do that please?

Thanks

[christian]

Sorry for the confusion. Are you referring to this phone number?

If so, to add a dot to it, go to Content Area Modal > Toggle and add the dot to the Primary Text..

Hope that helps.

[wolfproductions]

Hi Christian,

Yes But how do I make JUST the ‘.’ a different colour… so get around the iPhone/iPad issue…

Thanks

[ruenel]

Hello @wolfproductions,

The primary text and the secondary text will only accept plain texts. Regretfully you cannot have a different color for the . dot in your phone number.

Regards.