How do I resize images on Android?

Question

I'm trying to use my mobile.css file to resize images to 310px wide. This is working on the iPhone but not on Android.

How can I resize these images on Android?

Here's my page & CSS:

div.photosmall,
div.photosmall img,
div.photosmall a img,
div.photosmall-left,
div.photosmall-left img,
div.photosmall-left a img,
div.photosmall-right,
div.photosmall-right img,
div.photosmall-right a img,
div.photobanner,
div.photobanner img,
div.photobanner a img,
div.photolarge,
div.photolarge img,
div.photolarge a img,
div.photolarge-left,
div.photolarge-left img,
div.photolarge-left a img,
div.photolarge div.photolarge,
div.photolarge div.photolarge img,
div.photolarge div.photolarge a img,
img.photobanner,
img.photolarge {
    width:310px !important;
    float:none;
}

Answer 1

The first thing we need to check is that the CSS file really is being loaded. It looks like you're dynamically loading the CSS by using some JavaScript mobile browser detection functions. Are any other rules in mobile.css definitely taking effect? if you're not sure, try adding outline:solid 1px red to your image style attributes for visible feedback. If there is still no effect, The script isn't doing its job, or Android is trying to emulate a desktop browser (and there may or may not be an option to change that).

As a side note, you specify the image width to be 310px wide, but the default style on the page says 300px. Are you sure you want to make the images bigger on a smaller screen?