Responsive CSS - Where have i gone wrong?

On my blog, I have constructed a Featured box, but when viewed on a mobile device, it does not scale very nicely.

http://bit.ly/KLqOAa

Here's the CSS rules i created. Could someone suggest any mod's to these rules to make them more css friendly?

Thanks so much!

/**eNews Extended Featured Box CSS */

#enews-ext-4 {
padding: 5px 10px 0px 40px;
}
.featured-box .enews #subscribe {
margin: 7px 0px 0px 40px;
}

.enews #subbox, .enews #subbox1, .enews #subbox2 {
background: #fff;
border: 1px solid #619AD1;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
color: #666;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
margin: 5px -7px 0 0;
padding: 5px 7px;
width: 190px;
}

.featured-box .enews input[type="submit"] {
margin-left: 20px;
font-size: 15px;
font-weight: bold;
font-family: Helvetica, sans-serif;
}
/* FEATURED BOX VIDEO IN TEXT WIDGET --------*/

.blog .fboxvid {
position: relative;
overflow: visible;}

.blog .fboxvid embed {
border: 3px solid #619AD1;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;

}