media query min bound isn't working

Question

I have this query in my css. Originally the width is 100% and when the screen size is between 768 and 1024 px I want it to be 50% . The max-width seems to be working because the width gets halved but once the screen width goes below 768 it still stays 50%. Should it not revert back to 100% ?

@media (max-width: 1023px) and (min-width: 768px)
  .item {
    width: 50%;
}

Answer 1

You are missing a couple curley brackets. It should look like...

@media (max-width: 1023px) and (min-width: 768px) {
    .item {
        width: 50%;
    }
}