Help troubleshoot responsive image sizing

HTML & CSS
1

I have a responsive site with an incorporated WordPress Blog:
http://www.openrangeimaging.com/blog/

In Firefox and IE when I drag the browser to a narrower width the images do not resize to be smaller with the width:auto rule.

It works as it should in Chrome, Safari and on iphone4.

Some glitch or omission in the responsive media queries or…? I can’t seem to figure it out. Any help much appreciated.

Here is another site with incoporated WP blog that I built in almost the same way. It correctly resizes and is responsive, including the images, in all 4 browsers. Not sure why this one works and the one above has the problem.
http://grayheadowner.com/blog/

any help much appreciated.

2

I am still stumped and pleading now for help.

I tried adding an image to another static .html/css page and still have the trouble as described in my first post above.
http://www.openrangeimaging.com/renderings.html

After examining with firebug it seems that for some reason at the 767 pixel break the @media query rules from the p7cmm-responsive.css are not being applied.

At the 767 pixel break the @media query rules from the p7cmm-responsive.css and the image sizing in the link above works as it should in Chrome and Safari and on my iphone4 but not in Firefox or IE.

What is odd is that I have a copy of the site on my localhost and the p7cmm-responsive.css rules do get applied and the image re-sizes at the 767 and narrower break point as it should on all 4 browsers (FF, IE, Chrome, Safari).

I cannot figure out what is wrong. Any help or trouble shooting advice will be greatly appreciated.

3

I replaced my online version with the version I had on my localhost. That has fixed the problem. (I thought they were identical but apparently not).

So problem resolved. thanks to any who read and considered this.

4

Hi,

Sorry I missed your post but glad you managed to sort the problem yourself and thanks for documenting the fix :slight_smile: