Having a problem with repeating images (all three) showing up in vertical orientation on mobile device. Can anyone help? Here's snippet of media query code used in HEAD of my HTML email:

<style type="text/css">@media only screen and (max-width: 480px) {
table.container {width: 100% !important; }
td.content {width: 100% !important; }
td.header img {display: none }
td.header {background-image: url(img/WV_header_M_480x165.png); no-repeat center; height: 165px !important; }
td.promo1 img {display: none }
td.promo1 {background-image: url(img/1082_M_480x640.png); no-repeat center ; height: 640px !important; }
td.footer img {display: none }
td.footer {background-image: url(img/WV_footer_M_480x170.png); no-repeat center; height: 170px !important; }
}
</style>

<style type="text/css">@media only screen and (max-width: 320px) {
td.header img {display: none }
td.header {background-image: url(img/WV_header_S_320.png); no-repeat center; height: 165px !important; }
td.promo1 img {display: none }
td.promo1 {background-image: url(img/1082_S_320x427.png); no-repeat center ; height: 427px !important; }
td.footer img {display: none }
td.footer {background-image: url(img/WV_footer_S_320_T.png); no-repeat center; height: 170px !important; }
}
</style>