I set up this site in the new template for fluid sites, or responsive as you call them, I have a picture in the index page that looks very good on a browser, however, when I open it up on a I Phone 4S the picture is distorted. I try several different sizes of pictures, I use Photoshop to re-size the picture. Can you suggest what I can do to clear this up?
www.dickstantonarb.com
Thanks.

This maybe.

If it's still displaying funny at certain screen sizes, you could try changing the width to 90% (for example) so it won't stretch to the full width of its available space.
You could also assign a class or ID to it – something like this:

h1 img {
max-width: 220px;
height: 250px;
}
(and remove the in-line width/height from the html code)

The picture is small enough that the width wouldn't be an issue even at the smaller screen sizes.
Just curious... why are the h1 and h2 within "<div align="center"></div>"? It seems the centering along with the float: left may be giving it the room to stretch out of proportion.

That's a nice use of that template – well done

Paintbrush, he hasn't applied Eric's suggestion yet. I tried his suggestion last night, and it worked well on my iphone.

Just wanted to throw out some other info since I learned (through trial & error) that 100% width isn't always the answer – sometimes it's the problem
I've had a problem with some pics stretching vertically to fill empty space beneath them as well as the horizontal stretching. Most are OK with just width: 100%, height: auto – but it depends on what's holding the picture.
Sometimes 100% of the div space available is wider than the photo's original width so you get stretched distorted photos. For photos that start out at well under 320px wide (up to about 280px), I'd just leave them at their original size since there's no need to shrink them to fit.

(When I looked at Rich's photo without the float left, it didn't get distorted at all no matter the size.)

You're probably right. I haven't yet had the time to delve into the fluid/responsive templates due to other commitments (we have 125 bee hives). But I will.

If the img 100% doesn't work with the current setup then all that should need to be done is set the image inside a div with a max width the same as the image.

Inger – When it comes to responsive images, there's probably about as many ways to deal with them as you have bee hives!
I've just begun to play with one of the new CC templates ("birdie"), so will have to mess around some more to see how it goes. Maybe a cup of tea with HONEY before getting back to work... where did that thought come from?

How's it going, Rich?

All this Honey talk reminds me of something.

I had a go at the template... this worked for the photo:





(I didn't make any changes to the h2 or menu)

Eric Haven't heard that since I was a kid – sounds kind of yucky now