Hiding image for mobile devices - html

Question

I'm trying to hide a certain image for mobile devices on my website. I've tried a various of html and css code and i cannot get it to work. It might have something to do with my div class's and Id tags.
please can someone try and get it to 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 have to use #Media screen:
screen Used for computer screens, tablets, smart-phones etc.
Combine it with pixel-ratio to fit your needs. Check more examples here
For example (for 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

<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>

Answer 3

I run your HTML and CSS on JSFiddle. I just change your CSS to:
img {
display:none;
}
and got this
not sure if its this what you are looking for

Answer 4

This seemed to work for me, which was odd
#media (max-width: 768px) {
#left-sidebar .logo .nav {
display:none;
}
}

Answer 5

instead using display:none try this
#media (max-width: 600px) {
#left-sidebar .logo .nav {
display:hidden !important;
}
}
this code will work if isn't still not working please check device width and go on

Answer 6

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