#media section styles are not being applied; other #media sections working - html

Question

I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).

Answer 1

Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}