Link Color OK on desktop but not on mobile

The link color for me on your amp site has not been set. Go into your admin panel for the plugin, then go to design and enter the custom css area. For example, paste this if you want it to be the same as your desktop pages:

.a, .a:visited{
   color: #0D72C7;
   text-decoration: underline;
   font-weight:bold;
}

I notice you have no hover on your desktop links. If you did then you would need to enter the same css into your AMP version too.

Hi @enxaqueca,

Try by adding this code in the custom CSS option present in the AMP options panel.

.amp-wp-article a{
    color: red
}

Hi @marqas and thank you for your help! Strangely, it didn’t work for me. I wonder what might be wrong.

This may work because of the css hierarchy if you want to mirror links from your non AMP version. I misstyped in my original post.

a, a:visited{
color: #0D72C7;
text-decoration: underline
}

Then if you have any caching on your site, empty the cache just in case. Not sure why it is not showing for you if you made the change and then saved it. Do you have anything special going on in .htaccess?

The css from Marqas should work too.

You should be able to see the css you have added in the source code for your AMP page.

• This reply was modified 7 years, 3 months ago by frenchomatic.
• This reply was modified 7 years, 3 months ago by frenchomatic.
• This reply was modified 7 years, 3 months ago by frenchomatic.

Hi, @frenchomatic! Your CSS did the trik, except for the underline part. Thank you! It’s already a huge improvement over my links that were indistinguishable from normal text. I wonder why the underline didn’t go.

Add this

.amp-wp-article a{
text-decoration: underline;
}

and also this to deal with AMP hover as you don’t seem to have hover in your non-AMP page. Personally I would define a hover change in both you AMP and non-AMP page but that is your design decision. If you would like to have a change in link color for hover then let me know and I will give you the css.

a, a:visited, a:hover, a:focus{
color: #0D72C7;
text-decoration: underline;
}

Basically you need to replicate the css you are using on links in your non-amp page.

Thank you, @frenchomatic – the underline is there now!

And also thank you very much for the advice on applying a hover change. My thought was that since mobile phones don’t have a cursor to hover on the link text – just the tips of our fingers to tap directly – I could do away with the hover. Is that not so?

If this makes my likes more visible accessibile, I would certainly like to apply the hover change in link color. Would you be so kind as to let me know the css? Thanks once again.

I would make links underlined and on hover have no underlining. Color change is insufficient for people with eyesight difficulties. Change of shape is more accessible to them and meets with accessibility standards. I would also use color change for hover and onfocus as it is a nice design thing to do. In this case

a, a:visited{
color: #0D72C7;
text-decoration: underline;
}

a:hover, a:focus{
color: red ; or whatever color you choose.
text-decoration: none;
}

.amp-wp-article a, .amp-wp-article a:visited{
color: #0D72C7;
text-decoration: underline;
}
.amp-wp-article a:hover, .amp-wp-article focus{
color: red ; or whatever color you choose #hex.
text-decoration: none;
}

Then use (change) the first two bits of code in your non-AMP css as well. Hope that makes sense.

Hi, @frenchomatic Thank you so much for helping the users.

@enxaqueca, let us know if you need any more help.

Regards
Marqas