Numbers won't display in text widget on mobile view

[Annie Jantzen]

I have a text widget with text in it that contains alphabetic and numeric text in it.

The text before the numbers (phone number) displays and the text after the

numbers display, but the numbers won’t display on the mobile view.  All displays properly on a computer.

Is there a known issue around this?  I couldn’t find anything in the Trusted support threads.

 

Thank you!

[Andy]

There is nothing in the theme that would prevent numbers or numeric text from appearing in mobile view.

Is the widget a standard WordPress widget or a plugin widget (page builder widget for example)?

Is the widget area where you have placed the widget one of the widget areas of the Trusted theme or a widget area provided by a plugin?
The widget areas provide by the theme are ‘Blog Sidebar’, ‘Home Page Sidebar’, ‘Page Sidebar’, ‘Shop Sidebar’, ‘Top Bar’, ‘Footer Columns 1/2/3’ and ‘Middle Footer’.

If it is a page builder widget for example, does the widget have settings for how it is displayed on mobile?

Would you be able to let me know the URL of your site and describe to me where the text that is not displayed correctly is located?

[Annie Jantzen]

Hi Andy,

Thanks for your reply.  I am using the standard WordPress Text widget on the page and all I did was add the Text widget as a new row on the main body of the page.

Here is the URL:  http://highdesertgypsypsychic.com/index.php/contact-me/ ‎

This happens for all instances of the Text widget that I have used on other pages too.

If you have any ideas, please let me know.

Thank you!

[Andy]

When I view your site on both dektop and mobile (android and iphone) I can see the phone number without any problems. See screenshots below.

Desktop

Mobile – phone number is still visible

The widget area on the main body of the page is not part of the Trusted theme, and I can see that you are using the Page Builder by SiteOrigin plugin and possibly also SiteOrigin Widgets Bundle for that content.

If you still cannot see the phone number, I would recommend that you ask the Page Builder by SiteOrigin support as they will be to help with issues with their plugin.

[Annie Jantzen]

Thank you Andy.  What version of iOS are you running on your mobile device?

 

 

[Andy]

I think what is happening is that your iPhone is changing the plain text of the phone number into a clickable blue link, which on your blue background makes it look almost invisible.

It also looks like you have set the theme’s ‘Primary Color’ to a blue color (#0b1828) so the page links will be blue on blue background.

Not sure if the iOS/Safari phone link is blue because of the primary color setting or if Safari is defaulting links to blue color.

A couple of things to try

1. explicitly change the color of the phone number text in the widget to white…
2. …or if that doesn’t fix it, write the phone number with html markup to force it to display in white, see code below

<a href="tel:7754349967" style="color:#fff;">(775) 434-9967</a>

[Annie Jantzen]

Hi Andy,

The text is already set to white, but you were correct in that that the link color was being set to blue which was not visible against the background color I have set.  I changed the link color to yellow and now all is good.

Thank you!

[Author]

Posts