title: css media query doesn't work on Sony Xperia Z smartphone
body: <p>I need your help, I face a problem with my css media query code.</p>
  
  <p>I just wrote the following css media code</p>
  
  <pre><code>@media (max-width: 900px) {
  
      #content {
         width: 100%;
         margin: auto;
      }
      #recent_activities .act {
          width: 94%;
          padding: 3% 10px;
          background-color: #FFF;
          text-align: left;
          margin-bottom: 10px;
          margin-left: 0px;
          height: inherit;
      }
      #header_container
      {
          display: none;
      }
  
     #footer {
          width: 94%;
          margin: auto;
          padding: 3% 0px;
          text-align: center;
      }
  }
  </code></pre>
  
  <p>my problem is that the code works perfectly on the computer screen when I re-size the browser window but unfortunately it does not work on my smart-phone (Xperia Z).</p>