Jump to content

Archived

This topic is now archived and is closed to further replies.

dbrowne02

phone numbers changing to unwanted gray color on iphone and ipad

Recommended Posts

dbrowne02+    1
dbrowne02

Hi,

 

I have the latest versions of Framework and Wordpress. Everything works great. However, when I view the website on an iPhone or iPad the phone number in my masthead (and the phone numbers in all other places throughout the site) changes from black to a gray color. I have tried to fix using the Browser Specific CSS plugin--I was able to change other elements in the Masthead but whatever is overriding the phone number to change it gray won that battle.

 

I am trying to figure this out because I want to use DMS to improve my site, including adding some blue full width background sections. Of course, I'd want the phone number to remain black, white, etc. or else it's barely viewable on a blue background.

My website is brownelaborlaw.com.

 

Thanks in advance for any ideas you may have.

 

P.S. I am trying to upload a 172kb iPad png screenshot but have unable to do so on either forum updater (advanced and basic).   

 

Thank you.

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Hi, an update to my previous post.

 

The gray color was the color I chose for links. So that explains that. I still want to put a white text phone number in my header, on top of a blue colored background. However, if I do this, the links throughout my site will be white, which I don't want. Thanks in advance for any ideas you may have.

 

The related issue is that the google voice for chrome extension automatically turns any phone number into a blue Google color, with a blue underline underneath it. Does anyone know how to combat that?

 

To sum it up, I'd like my links to stay gray, phone number in masthead to turn white, and for Google Voice not to take over the white phone number in the masthead and turn it blue and underlined.

 

Thanks in advance for any ideas you may have.

 

Thank you!

 

--David

Share this post


Link to post
Share on other sites
Rob    547
Rob

David,

 

You need the Browser Specific CSS plugin, and need to set the link color to your desire for the header area only.

 

Do you have Firebug for Firefox or use Chrome's Inspection Tool?  If so, use either of those to indentify the CSS for that link, and scroll through the levels of CSS so that you can get the right one. You can also wrap the link into a custom class in a div, so that you can specifically style that link only. You can then make it work only for mobile browsers using the Browser Specific CSS pluign.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Rob, Thank you for your reply. I apologize I haven't been able respond earlier. I was away for a few days.

 

I actually tried using the Browser Specific CSS plugin before I made the initial post. For example, the following turns the phone number in my highlight-subhead to red when viewing in chrome--

 

body.chrome .section-highlight .highlight-subhead {
    color: red;
}
 
It is important to note that without adding the above custom css, the phone number is white in chrome, which is the color I chose for it. There is no gray link color to be seen on chrome for this element.
 
However, on an iPad or iPhone, the link color gray overrides my white command for this element. So the following, whether I choose red, white, etc. is overridden by the pesky gray link color--
 
body.iphone .section-highlight .highlight-subhead {
    color: white;
}

 

One of the issues is that I am not sure how to inspect the CSS for that link on a desktop, because no link shows up on a desktop and it works fine. Do you know how I can inspect the grayed link that only appears on an iphone or ipad?

 

Thanks for any ideas you may have.

Share this post


Link to post
Share on other sites

  • Similar Content

    • jdubdigi
      By jdubdigi+
      Onepage plugin is not working on an iphone. The page does not scroll properly and sections are partially missing, any ideas what the problem could be?
    • ivaemer
      By ivaemer+
      I've got the problem with Onepage plugin ..
      First two sections - Intro and Gallery Module are not showing on iPhone and iPad...help asap please
       
       
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • Bleuy
      By Bleuy+
      Problem: Full Screen Revslider content runs off the screen on mobile devices (particularly calls to action buttons).  I've used the <br> to break up the text, however the call to action buttons run off the screen.  Therefore without making the fix too technical (and I can see some VERY technical resolutions on here) my client just wants to simple centre justify the text when being viewed on a mobile device.  
      Any ideas on how best to achieve this in a simple, non too technical way?
      Thanks very much in advance
       
×