Show text for phones and tablets but not desktops

Question

I have it working on phones but the desktop text shows on the tablet.

@media all and (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .desktop {
    display: none !important;
  }
}

<h1 class="desktop">Desktop</h1>
<h1 class="mobile">Mobile</h1>

Answer 1

767px is practically the minimum width of the tablet.

You are probably testing on an Ipad. It is safest to set it to 1024px.

Because usually tablets are from 768 to 1024.

I suggest:

#header nav li.mobile {
    display: none;
}

@media all and (max-width: 1023px) {
  #header nav li.mobile {
    display: inline-block;
  }
}

@media all and (max-width: 1023px) {
  #header nav li.desktop {
    display: none;
  }
}