I create a website which is working completly i put media query..as per earlier responsive website but it not work in my website Here is code in header : <meta name="viewport" content="width=device-width" /> in style.css body, html { height: 100%;} body { font-size: 12px; line-height: 18px; font-family: arial, sans-serif; width:100%; margin:auto; background:url(images/main-full-bg.jpg) repeat #F60; background-size:cover; } . . . etc.... all css for pages.. after it /* ipad portrait */ @media only screen and (min-device-width : 768px) and (max-device-width : 980px) { body { min-width: 768px; } .shell { max-width: 748px; } #navigation ul li { padding-left: 24px; font-size: 15px; } .header-top { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { min-width: 320px; } .shell { max-width: 320px; } .header .shell { padding:0; background: url(images/m-header-shell.jpg) no-repeat 0 0; } .header-top { padding: 0px 0 0px 0; } #logo { margin: 0 auto; float: none; display: block; } } @media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { #logo a { background: url(images/) no-repeat 0 0; -webkit-background-size: 142px 57px; -moz-background-size: 142px 57px; background-size: 142px 17px; } #navigation { background: url(images/) no-repeat 0 0; -webkit-background-size: 298px 32px; -moz-background-size: 298px 32px; background-size: 298px 32px; } #navigation a.nav-btn span { background: url(images/) no-repeat 0 0; -webkit-background-size: 10px 15px; -moz-background-size: 10px 15px; background-size: 10px 15px; } .pagination a { background: url(images/) no-repeat 0 1px; -webkit-background-size: 18px 40px; -moz-background-size: 18px 40px; background-size: 18px 40px; } .main section { background: url(images/) no-repeat center bottom; -webkit-background-size: 300px 10px; -moz-background-size: 300px 10px; background-size: 300px 10px; } } i checked that when i run in mobile it seams css runnig from defalt css not from query css... Please help me to solve this
"style.css" is vague, name it for the media target. Rather than saying "only screen" in your queries, put them into the screen.css that was linked with the appropriate MEDIA attribute (usually screen,projection,tv so you don't miss anyone). Get rid of that device pixel-ratio nonsense. Most of your styles look to trump each-other. As such target via min-width only. That meta looks incomplete. I'd have to see the whole page to weigh in more, but generally speaking it looks like you are trying too hard to target devices instead of capabilities. Generally speaking the META I use is thus: <meta name="viewport" content="width=device-width; initial-scale=1.0" /> Code (markup): and I put this in the CSS so I don't have to futz with that device ratio nonsense. @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none; } } Code (markup): Question: are you working from crappy little stripe mobile -up, or lowest common denominator (non-media query aware 800 friendly) outwards? I know most advocate the former, but I find that to be a broken approach... Yeah, I guess I'd really have to see ALL of it to say much more. Generally speaking though if you have more than one condition per @media you're over-complicating something simple.