Search code examples
htmlcssmedia-queries

Media query works in devtools, but not on mobile device

I am trying to use a media query like this:

.search-results {
    width: 1000px;
    padding-top: 100px;
    margin: 0 auto;

    @media (max-width: 900px) {
       width: 100vw;
       padding-top: 40px;
    }
}

to make it look good in mobile, it works in chrome devtools, but the width stays the same in mobile. Here are the screenshots: mobile desktop

The <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> tag is included in the <head>

Solution

  • The @media rule should be outside of the class selector.

    .search-results {
    width: 1000px;
    padding-top: 100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .search-results {
       width: 100vw;
       padding-top: 40px;
    }
}