CODEWITHSUNDEEP
htmlcssresponsive-design
Shilp
Shilp

Reputation: 153

@media only screen and (max-width: 479px) not working for mobile

My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.

@media only screen and (max-width: 1024px) {
 body{
   background-color:#ff0000;
  }
}

@media only screen and (max-width: 767px)
{
 body{
   background-color:#000;
  }
}

@media only screen and (max-width: 479px)
{
 body{
   background-color:#111;
  }
}

Upvotes: 15

Views: 40709

Answers (7)

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

Maybe you can specifiy by using

@media only screen and (min-width:768px) and (max-width: 1024px) {}

because if a screen is 200px in width it would comply to all the other rules it's not exceeding their width

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

In the head of your document, make sure you have

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you omit this, then many devices will scale the page to fit the viewport.

Upvotes: 50

DavidN
DavidN

Reputation: 1

I had the same problem, but changing @media (max-width: 400px) with @media (max-device-width: 400px) worked for me, hope it helps you

Upvotes: 0

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 2138

Check in tag

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.

Here's an example of a viewport meta tag - this is the one I use on my own responsive website.

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

Upvotes: 5

Leroy Meijer
Leroy Meijer

Reputation: 1197

Why not use Twitter Bootstrap? http://twitter.github.com/bootstrap/

Upvotes: -2

apaul
apaul

Reputation: 16170

Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.

Also some mobile devices will respond to the @media handheld selector.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/

@media handheld and (max-width: 960px)
/*handheld*/

Upvotes: 1

Related Questions