Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

How to change the color of anchor tags(links) on my website for iPhone.

Hi folks, when developing my website, i've added the color for a tags for both visited, static, etc to a certain color.

But when I preview it on my iPhone (iPhone 6) all my links are blue.

When I use the Chrome Dev tools to preview it on mobile mode, the colors remain the same as in desktop.

But on my actual phone it gets blue.

Any tips would be greatly appreciated

are they the default blue? is there any other styles being applied when you view the site on your phone?

3 Answers

you did not give a color to the anchor tags, only on visited is there a color.

Hi Jacob yes you are right, I forgot about adding the

a {color:white}

that fixed my issue. Thanks for the help!!

Hi Jacob, negative. In the CSS i've added the rules such as a, a:visited, to the colors white or #fff. Everywhere else looks fine, on browsers and on the chrome dev iPhone simulator. It's only when I visit it on my actual phone.

the reason I asked, is that is this a VPN issue, or is this an CSS issue. Can you post your mobile styles so we can take a look at them. Also did you design the site mobile first?

So the only issue on your phone is the color? all other styles are applied? correct?

Hi Jacob maybe that's the issue, I did design the mobile first but i didn't do the mobile style.

/*** LINKS ***/
a {text-decoration: none;}
a:visited {color: #fff;}

/*** BULLET POINT REMOVER ***/
ul {list-style: none;}

can you explain that? you wrote the markup(HTML), then CSS for mobile, then used media queries to do larger screen sizes,? and in that order?