Работает только первый медиа-запрос, размер которого превышает 851 пикселей, но другие медиа-запросы не работают.

Question

Я использую этот код для форматирования страницы своих продуктов, но медиа-запросы не работают.

Работает только первый запрос (выше 851px)

Мой код:

.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%;
        }
    }

Answer 1

Я считаю, что ваши медиа-запросы хорошо обработаны, но вам нужно добавить пробелы между and.

Вот так:

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