Not displaying input tag on certain devices

Question

I'm trying to not display different input tags for different devices.

I have three input tags <input class="desktop"/> <input class='tablet'><input class= 'mobile'>

I'm not displaying desktop and mobile input tags by adding the css like this:

.desktop {
 @media(max-width: 767px){
    display: none
 }}

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

I'm having difficulty restricting it for tablet though. My tablet dimensions are between 768px and 1024 px

I've tried doing this but it doesn't work:

@media (max-width:768px) and (min-width:1024px) {
    display: none;
}

Any ideas on how I can control the input tag to only show between these dimensions?

Answer 1

It's just a syntax error. You need to put the class selector inside the media query like this:

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

See this example on w3schools

edited The media query just has the max-width and min-width the wrong way round. See below

/* apply at widths below 768px */
@media (max-width:768px) {
  body {
    background-color: lightskyblue;
  }
  .tablet, .desktop {
    display: none;
  }
}


/* apply from widths between 768px and 1024px */
@media (min-width:768px) and (max-width:1024px) {
  body {
    background-color: goldenrod;
  }
  .mobile, .desktop {
    display: none;
  }
}


/* apply from widths above 1024px */
@media (min-width:1024px) {
  body {
    background-color: lightseagreen;
  }
  .mobile, .tablet {
    display: none;
  }
}

<input class='mobile' placeholder="mobile">
<input class='tablet' placeholder="tablet">
<input class='desktop' placeholder="desktop">