Hide image for mobile devices

Question

I am trying to hide a specific image for mobile devices on my website. I have tried various html and css codes and I cannot get it to work. This may have something to do with my div tags and ids.

please someone try to make it work for me?

HTML:

<section id="left-sidebar">
 <div class="logo">
    <a href="#intro" class="link-scroll">
      <img src="assets/images/other_images/logo.png" alt="description of image">
      <img src="assets/images/other_images/nav.png" class="nav">
    </a>
 </div>

CSS

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:none;
    }
}

Answer 1

You should use @ Media Screen :

screen Used for screens of computers, tablets, smartphones, etc.

Combine it with pixel-ratioaccording to your needs. Check out some more examples.

( Samsung Galaxy S3):

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
{
    // insert here your custom styles
    #left-sidebar .logo .nav  {
       display:none;
    }
}

Answer 2

display:none

@media (max-width: 600px) {
    #left-sidebar .logo .nav  {
        display:hidden !important;
    }
}

, ,

Answer 3

I am running HTML and CSS on JSFiddle. I just change my CSS to:

  img {
            display:none;
        }

and got this

not sure if this is what you are looking for

Answer 4

It seemed to work for me, which was strange

@media (max-width: 768px) {
      #left-sidebar .logo .nav  {
            display:none;
   }
 }

Answer 5

<style>
.youClassname{display:inline;}
@media screen and (min-width: 320px) {
      .yourClassname{
            display:none !important;
   }
 }

@media screen and (max-width: 768px) {
      .yourClassname  {
            display:none !important;
   }
 }

</style>