css - Button size dont change according to the width size -

i have attempted use media query make website graphically nicer on tablet/smartphone. looked around , found common syntax adjust size via width of media.

/*media query*/  @media screen , (max-device-width: 720px) {  #homebutton input[type=image] {     position: absolute;     left: 0%;     top: 0%;     margin: 0px;     height: 700px; } } 

based on understanding, if device width 720px , below, homebutton size enlarged 700px. however, despite testing on 2 of emulator each sizing 1024px , 480px. homebutton both emulators @ height of 700px.

i have added important thing

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

here jsfiddle. pardon me if made mistake i'm not season-user on jsfiddle

**update** 

check jsfiddle , add css in project , let me know concern

http://jsfiddle.net/arunberti/jnzel/

here standard media queries used in site:

hope helps you

  @media screen , (max-width: 1024px) { ..styles go here }  @media screen , (min-device-width: 768px) , (orientation: portrait), screen , (max-width: 994px) { /* tablets in portrait mode , desktops less 994px of horizontal browser width */ }  @media screen , (max-width: 555px), screen , (max-device-width: 480px) { /* desktops less 555px of horizontal browser width , devices less 480px wide (most phones in landscape orientation) */ }  @media screen , (max-width: 320px) { /* less 320px (primarily phones in portrait */ } 

use meta tag well