Hiding tel: link on desktops

Question

On this site Site link I have a contact info on the top right with tel: link for mobile devices. How can we hide the tel: link on desktops the best (easiest) way? Now I have this:

CSS:

#header .contact-info1 { width: 253px; height: 50px; display: block; float: right;     background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin-    top: 110px; }
#header .contact-info2 { width: 292px; height: 51px; display: block; float: right;     background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin-    top: 30px; }

@media only screen and (max-device-width: 480px) {
#header .contact-info1-mobile { width: 253px; height: 50px; display: block; float:     right; cursor: pointer; background: url(contact-info1.png) 0 0 no-repeat transparent;     margin-right: 39px; margin-top: 110px; }
#header .contact-info2-mobile { width: 292px; height: 51px; display: block; float:     right; cursor: pointer; background: url(contact-info2.png) 0 0 no-repeat transparent;     margin-right: 0px; margin-top: 30px; }

HTML:

<a href="tel:+491796737741" class="contact-info1-mobile" ></a>
<div style="clear:right"></div>
<a href="mailto:info@rw-fliesen.com" class="contact-info2-mobile" ></a>

At the moment I'm hiding the link for desktops, but how can I hide the link for desktops and at the same time having the contact-images displayed for desktops?

Hey my SGS3 phone has a device-width of 720px in narrow (vertical) mode, while the SGS4 has 1080px (vertical) and 1920 horizontal. If you are detecting mobile on screen pixels it's going bad bad in a very short time. — FrancescoMM, Jul 04 '13 at 09:45
you can do that by using `javascript` or `jquery` click here to [see](http://stackoverflow.com/a/3540295/1719246) — softsdev, Jul 04 '13 at 09:45
Ok thank you. Is there any link source you can recommend to do it in javascript or jquery? — Daniel Hernandez, Jul 04 '13 at 09:47

score 1 · Accepted Answer · answered Jul 04 '13 at 09:52

you can also do that by $(window).resize using jquery

$(window).resize(function() {
    var width = $(window).width();
    if (width < 750) {
        // Do Something
    }
    else {
        //Do Something Else
    }
});

another option by detecting browser as link mention on my comment using jQuery or javascript

Hiding tel: link on desktops

1 Answers1