I can't test it right know, but if you want to have the 500px height in devices with a width smaller than 320px you're media query should be @media (max-height:320px)
instead of @media (min-width:320px)
.
EDIT:
I tested it and this way works:
@media (max-width:320px){
.carousel{
height:50px;
}
}
This way from resolutions that have width from 0 to 320, the .carousel
class will have 50px of height.
If this solve your problem please don't forget to vote up and select this answer :)