Media Query in CSS not applied

Question

the media query in my Grid-based CSS was not working all of a sudden (it was work fine weeks ago and I did not make any changes as for as I can recall). I tried different browsers (firefox, safari), disable cache on browser and verified correct CSS file downloaded by browser, but media query never worked. I tested below CSS and HTML file in http://www.cssdesk.com/, and again, Media Query was not working properly. I wasted almost half a day doing research and troubleshooting, now kind of give up (otherwise, my whole life would be wasted on the fragile CSS technology) and look forward to any help here. Thanks in advance.

My CSS file is as below:

* {
    /*  box-sizing: determine whether width includes padding and boarder  */
    /* content-box: (not include) | border-box (included) | initial | inherit; */
    box-sizing: border-box;
    padding: 0;
    border: 0 none;
    margin: 0;
    outline: 0;
    font-family: "Microsoft YaHei";
}

body {
    /*viewport size based design*/
    width: 100vw;
    height: 100vh;

    /* Layout Design - Mobile Phone first */
    display: grid;
    grid-row-gap: 0.5vmin;
    grid-template-rows: 15% 3% 77% 5%;
    grid-template-columns: 100%;
    grid-template-areas:
    'banner'
    'nav'
    'main'
    'footer';
}

/*=============================== For Banner ============================================*/

banner {
    /*For Layout*/
    grid-area: banner;
    /* embedded or nested Grid layout */
    display: grid;
    /*justify for X asix and align for Y asix*/
    /* Reference URL: https://css-tricks.com/snippets/css/complete-guide-grid/ */
    place-content: start center;

    /*For decoration*/
    background-image: url("Banner.jpg");  /* relative path to style.css */
    background-size: 100% 100%;
}

banner > h1 {
    /*For Layout*/
    top: 5%;        /* percentage relative to size of containing element */
    font-size: 2.8vmax;

    /*For decoration*/
    color: blue;
    font-weight: bold;
}

/*================================== For Navigation Bar ======================================*/

nav {
    grid-area: nav;
    /*position: relative;*/
    /*display: flex;*/
    /*width: 100%;*/
    /*height: 100%;*/

    /*For Decoration*/
    background-color: dodgerblue;
}

nav > ul {

    list-style-type: none;   /* remove bullets, margins and paddings in navigation bar */
    display: inline-block;
    height: 100%;
    width: 100%;
}

nav > ul > li {
    display:inline-block;    /* Horizontal Navigation Bar */
    height: 100%;
    float: left;
}

nav > ul > li > a {
    height: 100%;
    padding-left:1.5vw;
    padding-right:1.5vw;
    /*Vertically Centralize text in <a> tag */
    /*Reference URL: https://css-tricks.com/centering-css-complete-guide/*/
    display: flex;
    flex-direction: column;
    justify-content: center;

    /*For Decoration*/
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 2.0vmax;

}

nav a:hover {
    background-color: darkblue;
    cursor: pointer;
}

/* For Submenu */
nav > ul > li > ul {
    display: none;
}

nav > ul > li:hover > ul {
    display: block;
    width: 100%;

    list-style-type: none;     /* remove bullets, margins and paddings for all 'ul' in navigation bar */
    background-color: dodgerblue;
}

nav > ul > li:hover > ul > li > a {
    display: block;
    width: 100%;
    padding-left: 1.5vw;

    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1.8vmax;
}


/*================================== For Main Area ======================================*/

main {
    grid-area: main;
    /*height: 100%*/
    display:flex;
}

main > ul {
    display: flex;
    flex-flow: column nowrap;
    /*grid-template-rows: repeat(auto-fill,auto);*/
}

main > ul > li {

    list-style-type: none;   /* remove bullets, margins and paddings */
    /*height: auto;*/
    /*width: 100%;*/
}

/* For all post titles (of any article category) within main area */
main div.post-title {
    border-bottom: 0.5vmin solid dodgerblue;
    font-size: 2.0vmax;
    font-weight: bold;
    color: dodgerblue;
    /*text-decoration: none;*/
}

main div.post-title > a {
    text-decoration: none;
}

main p {
    text-align: justify;  
}

/* For Meta data (Author, Date, Tag, Views, Comments etc) of all posts including articles, notices etc */
main span.post-meta {
    float: right;

    color: dodgerblue;
    font-weight: bold;
    font-size: 1.5vmax;
}

main span.post-meta > a {
    text-decoration: none;
}

footer {
    grid-area: footer;
    position: relative;
    top: 0; bottom: 0; right: 0; left: 0;
    display: grid;
    place-items: center center;

    /*For Decoration*/
    border: 2px solid white;
    background-color: dodgerblue;
}

footer > p {
    color:white;
    font-size: 1.8vmax;
    font-weight: bold;
}

/* For Tablets or Desktops with screen width > 800px */
@media screen only (min-width: 800 px) {
    body {
        grid-column-gap: 0.5vmin;
        grid-template-rows: 15% 5% 75% 5%;
        grid-template-columns: 10% 65% 15% 10%;
        grid-template-areas:
        '. banner banner .'
        '. nav nav .'
        '. main aside .'
        '. footer footer .';
    }



    banner > h1 {
        font-size: 3.0vmin;
    }

    nav > ul > li > a {
        font-size: 2.2vmin;
    }

    nav > ul > li:hover > ul > li > a {
        font-size: 2.0vmin;
    }

    main div.post-title {
        font-size: 2.0vmin;
    }

    aside {
        grid-area: aside;
        border-left: 0.3vmin solid dodgerblue;
        display: flex;
        flex-flow: column nowrap;
    }

    aside > div {
        border-bottom: 0.3vmin solid dodgerblue;

        color: dodgerblue;
        font-weight: bold;
        font-size: 1.5vmin;
    }

}

My HTML file as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/style.css">
    <title>This is a testing site</title>
</head>

<body>
    <banner>
        <h1>Website Banner</h1>
    </banner>

    <nav>
        <ul>
            <li><a href="#infobd">Menu01</a></li>
            <li><a href="#infobd">Menu02</a>
                <ul>
                    <li><a href="#info">submenu01</a></li>
                    <li><a href="#info">submenu02</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <main>
        
    This is Homepage.

    </main>

    <footer>
        <p>
            Footer Contents<br>
        </p>
    </footer>

</body>
</html>

Answer 1

Your media query syntax is wrong.

Instead of: @media screen only (min-width: 800 px) { ... }

Try: @media only screen and (min-width: 800px) { ... }

What was wrong:

1. Using screen only instead of only screen.
2. Not using the and keyword to join media rules (screen and min-width).
3. Using 800 px instead of 800px