how to use many @media in css

Under circumstance of giving compatibility to mobile devices, I have too many @media queries and as a result some aren't working, is there a syntax I am missing? or is the limitation of CSS.

in this code I am trying to hide a part of the image, but as the width of the mobile changes, the height needs to change as well, I've searched online for a list of viewport resolutions and with regard to that list, I've given media queries to every possible resolution I could find. BUT, all of these media queries aren't working as I've mentioned before, therefore I request the community for a solution.

The CSS Code:

.desktopimg {
  height: 486px;
  overflow: hidden;
}

@media only screen and (max-width: 375px) {
  .desktopimg {
    height: 223px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 360px) {
  .desktopimg {
    height: 211px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 393px) {
  .desktopimg {
    height: 234px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 414px) {
  .desktopimg {
    height: 249px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 600px) {
  .desktopimg {
    height: 324px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 768px) {
  .desktopimg {
    height: 324px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 480px) {
  .desktopimg {
    height: 294px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 800px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 900px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 884px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 884px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 834px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 820px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 810px) {
  .desktopimg {
    height: 444px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 540px) {
  .desktopimg {
    height: 314px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 504px) {
  .desktopimg {
    height: 290px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 432px) {
  .desktopimg {
    height: 260px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 428px) {
  .desktopimg {
    height: 257px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 412px) {
  .desktopimg {
    height: 248px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 411px) {
  .desktopimg {
    height: 247px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 400px) {
  .desktopimg {
    height: 238px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 320px) {
  .desktopimg {
    height: 186px;
    overflow: hidden;
  }
}