Remove Image Link In Mobile Screen

I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link w

Solution 1:

Give your element a display:none; on the media query.

#test {
  display: block;
  background-image: url('../image/myimage.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px; 
  width: 75px;
  height: 75px;
  background: whitesmoke; /** Testing purposes **/
}

@media all and (max-width: 480px) {
    .hide {
      display: none;
    }
}

<divid="footer"><divclass="column"><ahref="http://mywebsite.com/delivery"id="test"class="hide"></a>

Solution 2:

Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:

@media screen and (max-width: 480px) {
    #test {
        display: none;
    }
}

Solution 3:

Right now your media query looks invalid.

To hide the link, you could do this:

@media screen and (max-width: 480px) {
  #test { 
    display: none;
  }
}

Note that this will override the display style of your #test element.

Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.