I'm having trouble with the media queries in my code for formatting my products page.
Currently, only the first query (for screens above 851px) is working properly.
This is how I've set up 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%;
}
}