Grow your CSS skills. Land your dream job.

CSS media queries for telephone numbers

  • # March 26, 2013 at 4:08 pm

    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?

    # March 26, 2013 at 4:33 pm

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

    # March 26, 2013 at 10:42 pm

    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!

    # March 29, 2013 at 4:04 pm

    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?

    # March 29, 2013 at 5:05 pm

    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

    # March 29, 2013 at 10:32 pm

    Awesome, glad to help!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".