Search code examples
cssmedia-queries

css media query doesn't work on Sony Xperia Z smartphone

I need your help, I face a problem with my css media query code.

I just wrote the following css media 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;
    }
}

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).

Solution

  • Just put the following meta tag in the <head>:

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

    hope that helps.