title: How to remove blank slide on different devices on flexslider?
body: <p>I have created a responsive slider using Flexslider for iPad and iPhone. My slider have different content on two device. Let say I have 1 slide on iPad and 2 slides on iPhone. I get a blank slides on iPad, Automatically. is there any magical way to remove the blank slide on iPad?</p>
  
  <p>My css:</p>
  
  <pre><code>iPhone-only{display:none !important;}
  iPad-only{display:none !important;}
  @media (max-width: 320px){
  iPhone-only{ display:block !important}
  }
  @media (min-width:768px) and (max-width:1024px){
  iPad-only{ display:block !important}
  }
  </code></pre>
  
  <p>My Html:</p>
  
  <pre><code> &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
           &lt;li&gt; &lt;div class"iPad-only"&gt; iPad Slide 1 &lt;/div&gt; &lt;div class"iPhone-only&gt; iPhoneSlide1 &lt;/div &lt;/li&gt;
           &lt;li&gt; &lt;div class"iPhone-only"&gt; iPhone slide 2 &lt;/div&gt;  &lt;/li&gt;
        &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>