title: @media hidden and visible mobile & desktop
body: <p>I am brand new to @media queries and only got to do with it when my Joomla page wasn't displaying correctly on mobile and tablet. I have read as much as I could find but still have an issue with a desktop background and a header image that isn't displaying on tablet and mobile devices.
  What I understand is that there are parameters set in the css code for diff widths of how the site will look. I have gone through my code (thousands of times) and tried to make the images visible on tablet and mobile by adding to the img code the visibility:visible statement: like this
       img {
       visibility:visible; 
       width: auto;
       height: auto;
       max-width: 90%;
      }
  It doesn't make a difference</p>
  
  <p>What I am wondering and this part I do not understand is if it has to do with the code set prior to @media (max-width: 480px) that is causing the images not to display.
  This code: 
      @media (min-width: 768px) and (max-width: 979px) {</p>
  
  <pre><code>.hidden-desktop {
      display: inherit !important;
  }
  .visible-desktop {
      display: none !important;
  }
  .visible-tablet {
      display: inherit !important;
  }
  .hidden-tablet {
      display: none !important;
  }
  }
  
  @media (max-width: 767px) {
  .hidden-desktop {
      display: inherit !important;
  }
  .visible-desktop {
      display: none !important;
  }
  .visible-phone {
      display: inherit !important;
  }
  .hidden-phone {
      display: none !important;
  }
  }
  </code></pre>
  
  <p>Please can someone help me to understand what about this I can change..there isn't anything that I want to hide from mobile or tablet and rather re-size the images than it not show.</p>