CODEWITHSUNDEEP
cssresponsive-design
Ian Davis
Ian Davis

Reputation: 19423

why can't I target smart phone vs. not smart phone with responsive design

I'm trying to define css for smart phone, and everything else in my CSS can be as-is.

Css:

.content { background: orange; padding: 30px; }
#mobile { display:none; }

@media screen and (max-device-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

Html:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="mobile">this is mobile</div>
  <div id="desktop">this is desktop</div>
</body>
</html>

Live demo: http://jsfiddle.net/L5zDQ/

If you make the browser window shrink w/ the demo above, "this is mobile" never shows up. What am I missing?

Upvotes: 0

Views: 65

Answers (2)

Joachim Isaksson
Joachim Isaksson

Reputation: 180947

max-device-width is the size of your screen, it does not change when you resize the window.

What you want is max-width which compares to the size of the browser window;

@media screen and (max-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

See this question for a little more discussion on the topic.

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179116

instead of using max-device-width you should be using max-width, which is subject to the size of the browser's current state:

@media screen and (max-width: 480px) {
    ...
}

Upvotes: 1

Related Questions