images visible on responsive mobile/tablets but hidden on desktop

Question

I have a fluid grid website that I'm designing using DW CS6. I am trying place a click to call image and a click to text image that I want to function only on a mobile device. I know that it is possible to have images and text hidden on certain size devices but I am not knowledgeable enough to understand how. I have tried to add the screen size limitations at the bottom of my CSS but that did not work either. I do have the code working to text or call from a mobile device. :)

Would I create a div class id="mobile"? I would greatly appreciate any direction that could be given. I have the media queries that come standard with the Fluid Grid Template in DW CS6.

HTML

<a href="tel:2513676152"><img src="images/callme.jpg" width="100" height="100" alt="click to call"></a>
<a href="sms:2513676152"><img src="images/textme.jpg" width="100" height="100" a;t="click to text"></a>

CSS

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;



/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left:auto;
    margin-right:auto;
    width:87.36%;
    padding-left:1.82%;
    padding-right:1.82%;
}

#LayoutDiv1 {
    clear:both;
    float:left;
    margin-left:0;
    width:100%;
    display:block;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width:90.675%;
    padding-left:1.1625%;
    padding-right:1.1625%;
}

#LayoutDiv1 {
    clear:both;
    float:left;
    margin-left:0;
    width:100%;
    display:block;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width:88.2%;
    max-width:1232px;
    padding-left:0.9%;
    padding-right:0.9%;
    margin:auto;
}

#LayoutDiv1 {
    clear:both;
    float:left;
    margin-left:0;
    width:100%;
    display:block;
}
}

Answer 1

You need to add media queries to your CSS to be able to accomplish this

/* DESKTOP CODE HERE */

@media screen and (max-device-width: 800px) {
    /* MOBILE CODE HERE */
}

Answer 2

within your code you provided you have different media queries. The last one is for desktop. When the screen width is over 768 px, this media query is being used for certain styles. So within this query, you would use your "display:none" or "visibility:hidden"(depends on what effect you want to achieve) to not show the image.

Example:

@media only screen and (min-width: 769px) { 
    .yourimgclass{display:none; (or) visibility:hidden;}
}