I am currently playing with a new design for the company. With responsive templates I am having trouble getting my photos to behave as I would normally. I know that tables are not the best way control photos but it is what I am used to. However the tables are responding as they normally would and the other photos on the page aren't working either. This is the link for the page in question.http://wqeqwe.pridhamsstudio.com/people.html
What do I have to do to get these images to fall into place with their name/position under them. I'm sure the answer is probably simple but it escapes me.
This page contains/shows 3 attempts, none of which worked. help!!!!!!!!!!!!!!!!!!!!!!!!

I've had good results with definition lists for this sort of thing.
The photos would be the <dt>s and the names and titles would be <dd>s
Check this out (scroll down to #6 – the gallery example): http://www.maxdesign.com.au/articles/definition/

You could also do an unorded list and put a <caption> under each pic, but I think the <dl> would better give the results you want.

Remove the width/height from your images (in the HTML) so they can shrink as needed. You can then create CSS rules for them. For example; if an image gets too tiny at a mobile-size screen, create a class for it (or all similar images) and set a min-width. So for the accent photos on the other pages, you could set the min-width around 275px and change the positioning to be left-aligned or in the center. Add padding to the top/bottom if the text is too close at single column size.

I'm finding this Responsive stuff to be quite addictive, it's fun once you get over the fear of blowing up your design!

Thanks for the reply. I put the 2 parts in the boby of the page and the css.

I got partial results.

I do not understand this part of your reply ......

"Remove the width/height from your images (in the HTML) so they can shrink as needed. You can then create CSS rules for them. For example; if an image gets too tiny at a mobile-size screen, create a class for it (or all similar images) and set a min-width. So for the accent photos on the other pages, you could set the min-width around 275px and change the positioning to be left-aligned or in the center. Add padding to the top/bottom if the text is too close at single column size.
Thanks

Here's an example:
html

css


Notice in the img tag, there's no height or width? Insert as usual, then delete those.
In the CSS, the width is set to 100%, height: auto, so it will be as large as its contaning <div>.
But when the page adjusts to mobile/portrait size, if that logo gets too small, I can add min-width: 250px; min-height: 250px; (or whatever is needed as long as it's less than 300px).

You can also specify some padding for your profile images (or list items) so they'll have a bit of space between them. On the other pages, the top/bottom padding on the images would be to keep the text from bumping right up to the images when everything goes down to one column.

Hope that makes some sense

Paintbrush, I thought you were a VSD'er. Now you show other people how to code.
Well done!

She comes to the dark side every now and then. It's hard to resist.

I'm determined to get this responsive stuff down. I will beat my websites into submission using any and all available tools & code
I'm having a knock-down-drag-out with some media queries – had to take a break for a bit.

I like the dark

I'm impressed by the two of you. I may have said so before...

I have tried what has been suggested. The photos are resizing okay, the text is showing up where it should be...............BUT I cannot get 3 images side by side like sample site paintbrush showed me.
I am obviously missing some thing important.
Can anyone point out the obvious to me
http://wqeqwe.pridhamsstudio.com/people.html
Thanks

Tom,
Try adding display: inline; to your <dt>s and <dd>s in the CSS.