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>

use this media query, @media only screen and (min-width: 800px) { } — Nazmul Hossain Pappu
– Nazmul Hossain Pappu, Commented May 1, 2021 at 11:49

Dharman · Accepted Answer · 2021-05-01 11:56:45Z

2

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:

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

edited May 1, 2021 at 11:56

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 1, 2021 at 11:51

Alex Mulchinock

2,2791 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yan Tian Over a year ago

Thank you for your answer, it worked perfectly. However, the "wrong syntax" I used previously was inline with guidelines from below URLs. w3schools.com/cssref/css3_pr_mediaquery.asp ( @media screen and (max-width: 600px)), fixrunner.com/how-to-fix-media-query-not-working-in-wordpress (@media screen and (max-width: 480px) ), css-tricks.com/a-complete-guide-to-css-media-queries (@media screen and (min-width: 600px))

Alex Mulchinock Over a year ago

What you had was similar - but not exactly correct. W3 schools aren't an amazing source of information (they're not always up to date or even correct), but CSS tricks (which you also linked) are excellent. In any case, I'm glad I could help. :)

Yan Tian Over a year ago

Noted, Thank you. my half day wasted just because I found inaccurate information. sigh...

Collectives™ on Stack Overflow

Media Query in CSS not applied

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related