I realized that my responsive css to reduce the size of the image on small screens like the iPhone was too small. So I've tried changing the media queries for that size. It seems to work when I reduce the size of my computer's viewport but not when I look at it on the iPhone itself.
Example: look at http://outtacontext.com/wp2/about/test on an iPhone in portrait mode.
My css for the image is on this page is:
@media only screen and (max-width: 479px) {
#past_background div.image_center {width: 150%; margin-top: 55%;}
#past_background img {max-width: 150%;}
}(I also used these styles for the next size up: @media only screen and (min-width: 480px) and (max-width: 767px))
I've cleared the cache of my iPhone's Safari but it doesn't change. It still looks like it did when I had no media queries styles for this size and the next size up.
Then I added this meta-tag to the template:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>This up'd the size alright but I am not sure what I'm doing now is proper CSS or not. So I'm getting lost. Can you help? I will take the meta-tag off so you can see what it looks like.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
