Mobile responsive images in HTML container

Here is the site ... http://www.sacredlightphotography.com

In the footer I have two columns, each an HTML container. The problem is the images don't scale down to mobile phone width. Any ideas how to make that happen?

Here's the CSS code I'm using. I've tried max-width, tried settings at 100%, 50% and auto but there is no change.

@media only screen and (max-width: 670px) {
#footer_image {
width: 50% !important;
}
}

Thanks!