Image is not resizing on responsive design

Question

I am using a child them of the Wordpress Twenty Twelve theme and my image is not resizing when I shrink my screen. The page that I am having trouble with is:

http://69.195.124.68/~discowv9/?page_id=146

If you shrink your screen's width you will see that the image does not change size. Normally this theme in WP automatically resizes the images. I can't seem to locate the CSS code that is not allowing it to resize.

Thank you in advance for your help.

I tried to post a screen shot but my reputation isn't high enough. It is the image of the before and after shots of the golf club handle.

<div style="white-space:nowrap;"><img class="wp-image-438 alignleft" src="http://69.195.124.68/~discowv9/wp-content/uploads/2013/04/Cleaning-Process-of-Club-Grip.jpg" alt="Cleaning a Golf Club Grip with Club Care" style="line-height: 1.714285714; font-size: 1rem;"></img></div>

.entry-content img, .comment-content img, .widget img {
    max-width: 100%;
}
img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] {
    height: auto;
}
img.size-full, img.size-large, img.header-image, img.wp-post-image {
    height: auto;
    max-width: 100%;
}

Answer 1

Actually image will resize when the container in which the image is placed will resize, if your using a div or any other element make sure it also resizes... if your trying to make a UI for a responsive design you can use CSS3 Media queries... I am suggesting this because your site is a your site is dynamic wordpress... Make sure these Media Queries would help...

Answer 2

I hink Saurabh is right. When parent element is not resizable then how can we expect its child to be resizable. Just try to make your #content to be resized. Give it to width in percentages. And it'll make your image responsive automatically. Hope it helps you.

#content {
float: left;
padding-right: 1em;
width: 100%;
}

Answer 3

use the white-space:nowrap; in your div