@Media Not Removing Image

Question

I'm attempting to make the site a little mobile friendly. I have an image (splitter-vertical.jpg) between the menu/nav & main content. I'm attempting to use:

@media (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
.left-img-col {
  width: 8%;
  float: left;
  display: table-cell;
  vertical-align: top;
}

<div class="left-img-col">
   <img class="splitter-off" src="https://tlod.net/include/img/splitter-vertical.jpg">
</div>

To remove the image on smaller screens.

But no matter the amount (500px, 300px, 900px) the image doesn't go away. I've also tried min-width: and couldn't get it to work. FireFox, Chrome, & Edge still display it no matter how big the browser window is. Even cleared cookies/cache and it still remains. View Live Site Here

Answer 1

In your style.css file , you have this code :

@media (max-width: 800px) {
  img.splitter-off {
    display: none;
  }
}
img.splitter-off {
  display: block;
}

change this code to :

 img.splitter-off {
      display: block;
    }
    @media (max-width: 800px) {
      img.splitter-off {
        display: none;
      }
    }

You shloud use media queries after main css.