@media queries re carousel-caption

I want to have the carousel caption quite large, but the problems arises in responsive view that the carousel caption (and background) are then too big for mobile display.

I have tried

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.carousel-caption.h1 {
font-size:14px!important;
}
}

and also a variety of other element combinations but to no avail.

I have also tried display:none; but this didnt work either.