title: CSS Elements hidden on iPad
body: <p>I created two css classes (hidedesktop and hideonmobile) so that I could selectively hide elements depending on whether the user was on  a desktop or mobile device. </p>
  
  <p>But I've noticed that elements with either class do not display on an iPad in portrait orientation despite working fine on desktop, mobile and landscape orientation.
  Does anyone have any tips on how to overcome this?</p>
  
  <pre><code>@media only screen and (min-width: 768px) {
  .hidedesktop{ display: none; }
  }
  
  @media (max-width: 768px) {
  .hideonmobile{ display: none; }
  }
  </code></pre>