Image is not resizing on responsive design

0 Views

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.

Read More

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%;
}
Post Views: 0

Related posts

Leave a Reply

3 comments

  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…

  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%;
}