css media queries not working for certain resolutions

Question

I'm using css media breakpoints in order to optimize fonts and such for different devices. Everything works except for two of my breakpoints but in an odd way.

I'm using the Google Chrome developer console to test all of these. The @media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) is for a device that is 1440px x 900px so the width is 1440.

However, the media query will only work if i set it to @media screen only and (min-device-width: 900px) and (max-device-width: 1919px) which doesn't make any sense to me.

@media only screen and (min-device-width: 320px) and (max-device-width: 500px) {
  /* Works */
}
@media only screen and (min-device-width: 960px) and (max-device-width: 1023px) {
  /* Works */
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1279px) {
  /* Works */
}
@media only screen and (min-device-width: 1360px) and (max-device-width: 1439px) {
  /* Works */
}
@media only screen and (min-device-width: 1440px) and (max-device-width: 1919px) {
  /* Doesn't Work */
}
@media only screen and (min-device-width: 1920px) and (max-device-width: 2499px) {
  /* Works */
}
@media only screen and (min-device-width: 2500px) and (max-device-width: 3839px) {
  /* Works */
}

Answer 1

Try this: http://codepen.io/anon/pen/rVKLOM

I changed around some values. there were gaps in widths.

.test {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  background-color: #e41;
  color: #fff;
  font-family: Helvetica;
  box-sizing: border-box;
  padding: 50px;
  width: 400px;
}



  @media only screen and (min-width: 320px) and (max-width: 959px) {
  .test::before { content: '320px - 959px'; }
}
@media only screen and (min-width: 960px) and (max-width: 1023px) {
  .test::before { content: '960px - 1023px'; }
}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
  .test::before { content: '1024px - 1359px'; }
}
@media only screen and (min-width: 1360px) and (max-width: 1439px) {
  .test::before { content: '1360px - 1439px'; }
}
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  .test::before { content: '1440px - 1919px'; }
}
@media only screen and (min-width: 1920px) and (max-width: 2499px) {
  .test::before { content: '1920px - 2499px'; }
}
@media only screen and (min-width: 2500px) and (max-width: 3839px) {
  .test::before { content: '2500px - 3839px'; }
}