Mr.Smithyyy Mr.Smithyyy - 1 month ago 11
CSS Question

css media queries not working for certain resolutions

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 Source

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'; }
}