Media Querry not working with CSS Grid (beginner)

April 21, 2023

I wrote a code using css grid but the media query is not working at all with it. I checked the syntax and all but still can’t figure out what it is that I am doing wrong here. It should have changed the color of for example Item 3 from pink to blue
HTML:

@media all and (max-width: 500px)
{
    .three{
        background-color: rgb(96, 18, 242);
        grid-column:        1/2;   
    }
    
    .four{
        background-color: rgb(251, 209, 132);
        grid-column:        1/2;
    }

    .nine{
        grid-column: 1/2;
    }
}


*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    width: 100vw;
}

.container{

    border:     2px solid red;
    width:      50vw;
    height:     50vh;

    position:   relative;
    top:        50%;
    left:       50%;

    transform:  translate(-50%,-50%);

    display:    grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(5,1fr);

    grid-gap: 2% 2%;
    
} 

/* ----------------------------------------------------- */



.box{
    
    border:             2px solid white;
    background-color: green;
}
    
.one{
    background-color: red;
    grid-column:        1/3;
    grid-row:           1/3;
}
    
.two{
    background-color: blue;
}
    
.three{
    background-color: pink;
    grid-column:        2/3;   
}

.four{
    background-color: orange;
    grid-column:        1/3;
}

.five{
    background-color: black;
}

.six{
    background-color: purple;
}

.seven{
    background-color: aqua;
}

.eight{
    background-color: brown;
}

.nine{
    grid-column: 1/3;
}

<div class="container">
    <div class="box one">   Item 1   </div>
    <div class="box two">   Item 2   </div>
    <div class="box three"> Item 3   </div>
    <div class="box four">  Item 4   </div>
    <div class="box five">  Item 5   </div>
    <div class="box six">   Item 6   </div>
    <div class="box seven"> Item 7   </div>
    <div class="box eight"> Item 8   </div>
    <div class="box nine">  Item 9   </div>
</div>

While the media query is working with few things like color etc.. but is not working at all with the things like Background Color or the css grid

>Solution :

Put the media query at the end of your css code.

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    width: 100vw;
}

.container{

    border:     2px solid red;
    width:      50vw;
    height:     50vh;

    position:   relative;
    top:        50%;
    left:       50%;

    transform:  translate(-50%,-50%);

    display:    grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(5,1fr);

    grid-gap: 2% 2%;
    
} 

/* ----------------------------------------------------- */



.box{
    
    border:             2px solid white;
    background-color: green;
}
    
.one{
    background-color: red;
    grid-column:        1/3;
    grid-row:           1/3;
}
    
.two{
    background-color: blue;
}
    
.three{
    background-color: pink;
    grid-column:        2/3;   
}

.four{
    background-color: orange;
    grid-column:        1/3;
}

.five{
    background-color: black;
}

.six{
    background-color: purple;
}

.seven{
    background-color: aqua;
}

.eight{
    background-color: brown;
}

.nine{
    grid-column: 1/3;
}


    @media all and (max-width: 500px)
    {
        .three{
            background-color: rgb(96, 18, 242);
            grid-column:        1/2;   
        }
        
        .four{
            background-color: rgb(251, 209, 132);
            grid-column:        1/2;
        }

        .nine{
            grid-column: 1/2;
            background-color: black;
        }
    }

<div class="container">
    <div class="box one">   Item 1   </div>
    <div class="box two">   Item 2   </div>
    <div class="box three"> Item 3   </div>
    <div class="box four">  Item 4   </div>
    <div class="box five">  Item 5   </div>
    <div class="box six">   Item 6   </div>
    <div class="box seven"> Item 7   </div>
    <div class="box eight"> Item 8   </div>
    <div class="box nine">  Item 9   </div>
</div>