Search code examples
htmlcssmedia-queries

@media max-width doesn't work on mobile browsers?

My @media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.

its mostly explained on this image.

It does work on my other @media codes for example:

@media only screen and (max-width: 1000px) {
    .extramargin {
        margin-left: 0;
    }
    #click {
        margin-left: 40px;
        width: 90%;
    }
}

If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.

Solution

  • You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport. Just include this in the <head> section

    <meta name="viewport" content="width=device-width, initial-scale=1" />