CODEWITHSUNDEEP
htmlcssangular
M Fahad
M Fahad

Reputation: 35

Only first media query is working which is above 851px but other media queries not working

I am using this code to format my products page, but my media queries are not working.

Only the first query is working (which is above 851px)

My code:

.my-prods-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .my-prods{
        margin-bottom: 30px;
        box-sizing: border-box;
    }
    @media screen and (min-width:851px){
        .my-prods{
            flex-basis: 21%;
        }
    }
    @media screen and (min-width:601px)and(max-width:850px){
        .my-prods{
            flex-basis: 30%;
        }
    }
    @media screen and (min-width:401px)and(max-width:600px){
        .my-prods{
            flex-basis: 45%;
        }
    }
    @media screen and (max-width:400px){
        .my-prods{
            flex-basis: 90%;
        }
    }

Upvotes: 0

Views: 108

Answers (1)

Mannaroth
Mannaroth

Reputation: 480

I believe your media queries are well crafted, but you need to add spaces between the and.

Like so:

@media screen and (min-width:601px) and (max-width:850px)

Upvotes: 1

Related Questions