My media (max-width) query not working when i change the size of the screen-CodePudding

so i want to resize the flex layout when the screen get smaller but the media query doesnt work and im not sure why.
Im new to this i've tried looking on this site but I don't know enough of this media query system to understand the problem im getting

*{
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
}
.layout {
    display: flex;
    flex-wrap: wrap;  
}
.nav {
    flex-basis: 100%;
    border-bottom: 1px solid #aaa;
    padding: 20px;
}
.sidebar {
    flex-basis: 20%;
    border-right: 1px solid #aaa;
    padding: 20px;
    border-bottom: 1px solid #aaa;
    }
.content {
    flex-basis: 80%;
    padding: 20px;
    border-bottom: 1px solid #aaa;
}

@media (max-with: 640px){
    .sidebar {
        flex-basis: 100%;
        border-right: 0;
    }
    .content {
        flex-basis: 100%;
    }
}

i have the this in the head

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

and this in the body

<div >
    <div >
        navigation in here
    </div>
    <div >
        sidebar in here
    </div>
    <div >
        content in here
    </div>
</div>

CodePudding user response：

A spelling error is tripping you up.

You wrote:

@media (max-with: 640px)

It should be max-width with a “d”.

CodePudding user response：

       **This is the right way**
/*------------------------------------
       css media quories start
-------------------------------------*/
        @media only screen and (max-width: 640px) {
            .sidebar {
                flex-basis: 100%;
                border-right: 0;
            }
        
            .content {
                flex-basis: 100%;
            }
        }
/*------------------------------------
       css media quories end
-------------------------------------*/