Search code examples
wordpressresponsive-designimage-resizingautoresize

Image is not resizing on responsive design

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

  • 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...