CSS mailto code not working, no idea why

[rystaman]

Hi there

I’m trying to change the colour and hover colour of my mailto and tel links in my footer and for some reason my CSS code isn’t working.

Here’s the HTML (assigned the links the class “mailtel”)

<p>30 Mullholland Drive</p>
<p>Example</p>
<p>Birmingham, B73 3RS</p>
<p>Email: <a href="mailto:info@dwanedigital.co.uk" class="mailtel">info@example.co.uk</a></p>
<p>Phone: <a href="tel:07983133835" class="mailtel"> 999999999 </a></p>

and here’s the CSS

.mailtel a {
  color: #b0b0b0 !important;
}

.mailtel a:hover {
	color: #ffffff !important;
}

It looks like i’ve done everything right but got no idea why it isn’t working.

Page url - https://www.dwanedigital.co.uk

[ruenel]

Hello There,

Thanks for writing in!

The css code is not correct. Please have it updated and use this instead:

a.mailtel {
  color: #b0b0b0 !important;
}

a.mailtel:hover {
	color: #ffffff !important;
}

Or simply this:

.mailtel {
  color: #b0b0b0 !important;
}

.mailtel:hover {
	color: #ffffff !important;
}

If you need anything else we can help you with, please let us know.

[rystaman]

That’s odd because this code works for two other classes

.mailto a {
  color: #ffffff;
}

.mailto a:hover {
	color: #303030;
}

.phone a {
  color: #ffffff;
}

.phone a:hover {
	color: #303030;
}

But have changed the CSS to the code you suggested and it works. Unsure why this one above worked fine

[mldarshana]

Hi There,

The code provide above has the highest precedence, means it will have the highest priority with !import keyword. You may have another CSS rule which conflicts with the above CSS but with the one we provide, it will simply prioritize.

Thanks!

[rystaman]

Ah okay, because I changed the above code into the given code by your colleague and it didn’t work, and had to change it back to get it to work.

[jade]

Let us know if you are still having issue with the code.