Search code examples
htmlcssmedia-queries

Media queries on mobile do not work even after the viewport meta tag

I realize this is a duplicate, but the solutions I have tried do not work. For some reason, after adding the viewport meta tag, my media queries do not work on mobile. Does anyone know why?

Edit: The reason why was because my screen wasn't zoomed in at 100% width.

Here is the code:

@media only screen and (max-width: 1260px) {
    .container {
        margin-top: 300px;
    }

    h2 {
        font-size: 3vw;
        width: 800px;
    }

    p {
        font-size: 2.5vw;
        width: 800px;
    }
}

@media only screen and (max-width: 550px) {
    h2 {
        width: 330px;
        font-size: 5vw
    }

    p {
        font-size: 4vw;
        width: 330px;
    }
}

Thanks.

Solution

  • I posted this a few months ago and now I realized it was because my screen was zoomed in. If you have this problem, make sure your window is set to 100% zoom.