css - Two media queries, same stylesheet, both work on Chrome, only on Firefox -


i have started designing media queries responsive design of page. have written 2 media queries follows:

      @media screen ,        (min-device-width : 320px)and        (max-device-width : 480px) {         #logintable {           margin-left: 27%;         }          .slider-wrapper {           margin-left: 23%;           margin-top: 5%;           width: 52%;           }          .descriptiontext1 {           margin-left: 12%;           font-size: 59%;           margin-top: 13%;          }         .header {          margin-bottom: 4%;         }        .descriptiontext2 {           margin: 5% 0px 15% 12%;           font-size: 61%;         }    }       @media screen ,       (min-device-width : 768px) ,       (max-device-width : 1024px) {        #logintable {           border-color: rgb(204, 24, 24);            margin-top:2%;            margin-left: 2%;         }        .slider-wrapper {            margin-left: 47%;            margin-top: -31%;        }          .descriptiontext1 {           margin-left: 4%;        }         .descriptiontext2 {            margin: 1% 0px 0px 4%;           }  } 

both media queries working fine on chrome, first media query not working on firefox, whereas second query gives output expected on firefox. tried using hacks first media query,

               <style>                  @-moz-document url-prefix() {                      <link rel="stylesheet" type="text/css"               href="css/responsive.css">                   }                </style> 

but second query works fine on chrome firefox without hacks. guess hack not solution. please help.

thanks


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -