CSS media queries for telephone numbers

[Pamela]

I don’t understand much about media queries. I am making my website’s phone number live for mobiles. I have done that. But how do I hide that live anchor in the desktop version with a media query?

[Alen]

Can you provide us with a working example so we can dig into the code and figure it out for you?

[Anonymous]

At higher media queries, you could change the number to something like this:

.phone-number {
color: #000;
cursor: default;
pointer-events: none;
}

Obviously, make the color match whatever your default text is, but the number will still be a link, it just won’t look or act like one anymore. There are probably other ways, but this is similar to one I’ve used in the past.

Good Luck!

[Pamela]

Hi, thanks for you help , this is the code I have in my html:

0400 468 539

/* this is in default stylesheet, styles.css: */

.tel {
text-decoration:none;
color: #074867;
cursor:default;
}

this for the media query:

/* =Media Queries

---

*/

@media only screen and (max-device-width: 480px) {

.tel{
text-decoration: underline;
color: #074867;
cursor:auto;
}

}

Is the syntax correct for the media query?

[Pamela]

Hi, Thank you for your help. I think I’ve sorted it.

The

.phone-number {
color: #000;
cursor: default;
pointer-events: none;
}

Seems to work well

[Anonymous]

Awesome, glad to help!

[Author]

Posts