Second media query not working

Question

The media query for the phone isn't working. I've looked at other posts and have found no solution.

As said above the problem is pretty plain. The media query for the laptop works, but for the phone does not seem to get recognized. Website: www,beesandthebirds.com

/*Media queries*/

/*Phone*/
@media only screen and (max-width: 415px) {
    #logo{
        background-size: 76%;
        height:60%;
    }
    #text{
        top:49%;
    }
    #text >h1{
        font-size: 4.5em;
    }
    #space{
        bottom: -47px;
    }
    .x8{
        top:625px;
    }
    .x9{
        top:725px;
    }
    .x10{
        top:825px;
    }
}

/*Laptop*/

@media only screen and (min-width:1024px) and (max-width: 1367px) {
    #logo{
        background-size: 21%;
        height:60%;
    }

    #text{
        top:49%;

    }
    #text >h1{
        font-size: 1.5em;
    }
    #space{
        bottom: -47px;
    }


}

Answer 1

I just recently added "meta name="viewport" content="width=device-width,initial-scale=1.0"" and now it works.