mobile css

HI there, I am trying to fix something on my website and therefore doing some testing with mobile css (I use opera mini emulator [opera.com ] ).
I am testing this code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Digital photography">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <style type="text/css">

  @media all and (max-width: 480px) {

   #main_picture { background:yellow; width:90%; height: 450px; border: 4px solid red; margin: 0 auto; }

   img { width: 100%; }

  }

 </style>



</head>

<body>
<div id = "main_picture" style ="width: 50%; height: 150px; border: 1px solid red; margin: 0 auto;">
<div style = "border:1px solid green; width:30%; background:blue; height:10%;">
</div>
</div>

<p>
<img src = "home_0.jpg" alt = " " class = "active" >
</p>
</body>
</html>

and I have noticed something very weird.
From what I understand the @rule should apply only to mobile devices with a max-width of 480px. When I run the code in the operamini emulator, I noticed that the #main_picture is picking up a width of 50% and not 90% as it should. Also it has a border of 1px and not 4px as it should as specified in the media rule. Now I wonder, why the code in the media rule is ignored and it defaults to the main css?
thanks

mobile css

dupalo

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week