css media queries not working for certain resolutions -


i'm using css media breakpoints in order optimize fonts , such different devices. works except 2 of breakpoints in odd way.

i'm using google chrome developer console test of these. @media screen , (min-device-width: 1440px) , (max-device-width: 1919px) device 1440px x 900px width 1440.

however, media query work if set @media screen , (min-device-width: 900px) , (max-device-width: 1919px) doesn't make sense me.

@media screen , (min-device-width: 320px) , (max-device-width: 500px) {    /* works */  }  @media screen , (min-device-width: 960px) , (max-device-width: 1023px) {    /* works */  }  @media screen , (min-device-width: 1024px) , (max-device-width: 1279px) {    /* works */  }  @media screen , (min-device-width: 1360px) , (max-device-width: 1439px) {    /* works */  }  @media screen , (min-device-width: 1440px) , (max-device-width: 1919px) {    /* doesn't work */  }  @media screen , (min-device-width: 1920px) , (max-device-width: 2499px) {    /* works */  }  @media screen , (min-device-width: 2500px) , (max-device-width: 3839px) {    /* works */  }

try this: http://codepen.io/anon/pen/rvklom

i changed around values. there 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 screen , (min-width: 320px) , (max-width: 959px) {   .test::before { content: '320px - 959px'; } } @media screen , (min-width: 960px) , (max-width: 1023px) {   .test::before { content: '960px - 1023px'; } } @media screen , (min-width: 1024px) , (max-width: 1359px) {   .test::before { content: '1024px - 1359px'; } } @media screen , (min-width: 1360px) , (max-width: 1439px) {   .test::before { content: '1360px - 1439px'; } } @media screen , (min-width: 1440px) , (max-width: 1919px) {   .test::before { content: '1440px - 1919px'; } } @media screen , (min-width: 1920px) , (max-width: 2499px) {   .test::before { content: '1920px - 2499px'; } } @media screen , (min-width: 2500px) , (max-width: 3839px) {   .test::before { content: '2500px - 3839px'; } } 

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -