CODEWITHSUNDEEP
cssmedia-queries
Bryan
Bryan

Reputation: 8697

Button size dont change according to the width size

I have attempted to use media query to make my website graphically nicer on the tablet/smartphone. I looked around and found a common syntax to adjust the size via the width of the media.

/*Media Query*/

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

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

Based on my understanding, if my device width is 720px and below, the homebutton size will enlarged to 700px. However, despite testing on 2 of my emulator each sizing 1024px and 480px. The homebutton for both emulators are at a height of 700px.

I have also added the most important thing which is 

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

Here is my jsfiddle. Pardon me if i made any mistake as i'm not a season-user on jsfiddle

Upvotes: 0

Views: 323

Answers (1)

Arun Bertil
Arun Bertil

Reputation: 4638

**UPDATE**

Check the Jsfiddle and add those CSS in your project and let me know your concern

http://jsfiddle.net/arunberti/jNZEL/

Here are the standard media queries used in a site:

Hope this helps you

  @media screen and (max-width: 1024px) { ..styles go here }

@media only screen and (min-device-width: 768px) and (orientation: portrait),
screen and (max-width: 994px) { /* for tablets in portrait mode and desktops with less than 994px of horizontal browser width */ }

@media screen and (max-width: 555px),
screen and (max-device-width: 480px) { /* for desktops with less than 555px of horizontal browser width and devices with less than 480px wide (most phones in landscape orientation) */ }

@media screen and (max-width: 320px) { /* anything less than 320px (primarily phones in portrait */ }

Use meta tag as well

Upvotes: 1

Related Questions