Responsive design working on developer tool, but not on phones. Where is the bug?-CodePudding

My web app is responsive on the computer and with the web developer tool. Works great using the developer tool and checking each phone.

It is not working on my actual phone though. Please help.

Here's the github page to publish that I am using so you can try on your phone: https://xtina-lt.github.io/flexbox/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Position Practice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div >
        <div >Logo Links Signout</div>
        <div ></div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div id="advertisement"></div>
        </div> 
    </div>
</body>
</html>

CSS:

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom right, rgba(0, 255, 255, 0.5), rgba(142, 164, 212, 0.5), rgba(138, 43, 226, 0.5));
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
}

.container{
    background-color: rgba(255, 255, 255, 0.2);
    width: 95vw;
    height: 95vh;
    display: flex;
    flex-wrap: wrap;
    padding: 1vh 1vw;
    row-gap: 0.5vh;
    column-gap: 0.5vw;
    justify-content: space-evenly;
}

.top-nav {
    background-color: rgba(144, 238, 144, 0.5);
    height: 12%;
    width: 100%;
}

    .side-nav {
        background-color: rgba(0, 0, 255, 0.5);
        height: 85%;
        width: 20%;
    }

    .main {
        box-sizing: border-box;
        background-color: rgba(255, 192, 203, 0.5);
        height: 85%;
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        padding: 1vh 1vw;
        row-gap: 0.5vh;
        column-gap: 0.5vw;
        justify-content: space-evenly;
    }

        .sub-content {
            background-color: rgba(255, 255, 0, 0.5);
            width: 30%;
            height: 80%
        }

        #advertisement {
            background-color: rgba(129, 1, 129, 0.5);
            width: 100%;
            height: 15%;
        } 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .side-nav{
        width: 35%;
    }
    .main{
        overflow: scroll;
        scrollbar-width: none;
        width: 60%;
    }
    .sub-content {
        background-color: rgba(255, 255, 0, 0.5);
        width: 100%;
    }
}

I have also tried:

@media only screen and (max-width: 480px)

Should look like: screenshot in developer tool view lol

CodePudding user response：

I hosted it locally it works fine, seems like a problem with your host
try netlify, it's a great free host service