Product Landing Page: Unable to make @media query run

HTML-CSS
1

I am struggling to make the media query run to make my nav bar responsive; i have tried every possible thing i could : @media screen and (mmax-width:650px), @media only screen and (max-width:650px) but nonthing works fine for me

Here’s my code with internal css within style tag:

Product Page *{ padding: 0; margin: 0; box-sizing: border-box; } 
        body{
            background-color: antiquewhite;
            font-family: 'Lato', sans-serif;
        }
        
        #wrapper{
            position: relative;
        }
        li{
            list-style: none;
            
        }
        
        
        a{
            color: #000;
            text-decoration: none;
        }
        
        header{
            width: 10s0vw;
            position: fixed;
            top: 0;
            min-height: 75px;
            
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: aquamarine;
            
            @media screen and(max-width: 600px){
                flex-wrap: wrap;
            }
            
        }
        
        .logo{
            border: 1px solid black;
            width: 60vw;
            @media screen and(max-width: 650px){
                margin-top: 15px;
                width: 100%;
                posistion: relative;
            }
        }
        
        #header-img{
            border: 1px solid black;
            width: 100%;
            max-width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            @media screen and(max-width: 650px)
            {
                margin: 0 auto;
            }
            
        }
        
        #nav-bar{
            border: 1px solid black;
            font-weight: 400;
            
            @media screen and(max-width: 650px) {
                margin-top: 10px;
                width: 100%;
                padding: 0 50px;
              
                li{
                    padding-bottom: 0px;
                }
            }
            
                        
        }
        
        ul{
            border: 1px solid black;
            width: 35vw;
            display: flex;
            justify-content: space-around;
            
            @media screen and(max-width: 650px){
                flex-direction: column;
            }
            
            
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header id="header">
            <div class="logo">
                <img src="http://www.pngmart.com/files/1/Civil-Engineering-Book-PNG.png" id="header-img" alt="logo of library club">
            </div>    
            
            <nav id="nav-bar">
                <ul>
                    <li class="nav-link"><a href="#">Features</a></li>
                    <li class="nav-link"><a href="#">Our Partners</a></li>
                    <li class="nav-link"><a href="#">Pricing</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
2

It might be as simple as changing

@media screen and(max-width: 650px)

to

@media screen and (max-width: 650px)

put a space after ‘and’

if i remember correctly, if you forget the space, it doesn’t work at all

And imho, you should maybe separate your media queries from the rest of your css, put them at the bottom for example :wink:

3

Hey Friend

Thanks for the help, i must say that the former thing i had already tried that and it didn’t work but your latter opinion worked fine but i don’t know what’s the problem in having a media query within the element itself!!

I appreciate if you have any idea about that?

4

in term of code maintenance, it is far more practical

Let’s say that you want to change your media querries because the new standard for smartphone is max-width: 250px.

if you have multiple @media screen and (max-width:350px) , you’ll have to change everyone of them, which is much more tedious than only changing one and also create more room for mistakes.

Less is better , in most cases :wink:

and it also makes your css file ligther. Not by much, but it is a good habit to take

Hope that helps :wink:

5

@MAK_21, this code is not valid CSS3 as it is not possible to nest rules like this:

 header{
            width: 10s0vw;
            position: fixed;
            top: 0;
            min-height: 75px;
            
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: aquamarine;
            
            @media screen and(max-width: 600px){
                flex-wrap: wrap;
            }
            
        }

This would work though:

header{
            width: 10s0vw;
            position: fixed;
            top: 0;
            min-height: 75px;
            
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: aquamarine;
}

@media screen and(max-width: 600px){
       header {
                flex-wrap: wrap;
       }
 }