Search code examples
cssmedia-queries

Why is my webapp unable to detect the media query attribute?

I'm trying to allow my webpage to react accordingly to the media query attributes. I have searched all over the web and found this universal meta code

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

and in my CSS i change accordingly

@media only screen and (max-device-width: 720px) {

#homebutton input[type=image] {
   position:absolute;
   left:0%;
   top:0%;
   margin: 0px;
   height:700px;
}

I tried it on my opera mobile emulator on both different mobile interface

  1. WXGA Landscape 1280x800
  2. HD Potrait 720x1280

But the homebutton of mine still remain the same size as it originally is like below

#homebutton input[type=image] {
  position:absolute;
  left:0%;
  top:0%;
  margin: 0px;
  height:70px;
}
Solution

  • If your 700px rule (in the @media block) is above the 70px rule, and the latter applies outside of any @media blocks, then that will override your 700px rule for all media.

    In order for your @media block to override the general rule, you need to move it beneath it in your stylesheet.

    See my answer to this question for an explanation.