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

Question

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

WXGA Landscape 1280x800
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;
}

What does your stylesheet look like? Is your `70px` rule above or below the `700px` rule? — BoltClock, Jul 24 '13 at 09:06
my 700px rule is above my 70px. May i ask, does that make a difference? — Bryan, Jul 24 '13 at 09:07
Oh yes it does. I have verified and it differ on my emulator. Thanks. — Bryan, Jul 24 '13 at 09:08

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

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.

edited May 23 '17 at 10:32

Community

1
1

answered Jul 24 '13 at 09:10

BoltClock

700,868
160
1,392
1,356

Thanks! Glad to meet a fellow singaporean in this website. Pardon me for any ignorance as i'm still new to it. Regards. – Bryan Jul 24 '13 at 09:11
No problem. You should know that I went to TP as well ;) I studied Information Technology from 2009-2012. – BoltClock Jul 24 '13 at 09:16
@Mr. Alien: Yes, it's appropriate to add that tag when it concerns both. – BoltClock Jul 26 '13 at 12:41
@BoltClock Cool, thanks.. just one more question, what if the solution is css3? can we add that? kinda does it effect the search results? – Mr. Alien Jul 26 '13 at 12:44

score 0 · Answer 2 · answered Jul 24 '13 at 09:14

You can try to search for responsive layout as well and what I suggest is to target all the devices with the width element so try use this:

@media (max-width: 720px) {
  #homebutton input[type=image] {
    height:700px;
  }
}

and unless you want to change some attributes on the elements you don't need to specify it in the media query.

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

2 Answers2