title: Hide elements of html in slider using css
body: <p>Iam using this slider <a href="http://tympanus.net/codrops/2013/04/17/background-slideshow/" rel="nofollow">http://tympanus.net/codrops/2013/04/17/background-slideshow/</a> for fully background slider. I added some image in the class main:-</p>
  
  <pre><code>   &lt;style&gt;
         .mobile {
             visibility:hidden;
         }
         @media(max-width:480px) {
             .desktop {
                 visibility:hidden.
             }
             .mobile {
                 visibility:visible;
             }
        }
  &lt;/style&gt;
  &lt;ul id="cbp-bislideshow" class="cbp-bislideshow"&gt;
                  &lt;li class="desktop"&gt;&lt;img src="images/1.jpg" alt="image01"/&gt;&lt;/li&gt;
                  &lt;li class="desktop"&gt;&lt;img src="images/2.jpg" alt="image02"/&gt;&lt;/li&gt;
                  &lt;li class="mobile"&gt;&lt;img src="images/mobile/1.jpg" alt="image03"/&gt;&lt;/li&gt;
                  &lt;li class="mobile"&gt;&lt;img src="images/mobile/2.jpg" alt="image04"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What i want to show image having class desktop and to hide image of class mobile and also to hide  class desktop  and show class mobile if browser having max-width of 480px. But after showing image of class desktop it shows white screen which i don't want. 
  Please help.</p>