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
Post a Comment