css @media doesn't work

you are missing that:
<meta name="viewport" content="width=device-width, initial-scale=1">
without that, the iphone will assume it has a screen larger than reality.

To Gauther,

I've already tried that, that COMPLETELY messes up the iPhone, TOTALLY unresponsive.

I guess I just have to have 2 versions & decide what to display based on the device.

Thanks

To Gauther,

More specifically, look at http://rainrich.com/scheduling/resp_test2.htm

Look at it on an iphone (or similar), all screwed up.

Thanks

Of course, you can't have a page halfway responsive, your header need to be responsive too.
and an image map is not the way to go.
To help you,  you probably need to use a responsive framework like bootstrap or foundation.

Richard,
With all respect, you need to stop blaming the tools. It's like you're using a hammer to glue something underwater at the moment.
All mobile responsive sites have the viewport tag  for the reasons mentioned already.
Media queries do work when implemented correctly.
The issue here is the use of images that do not scale well. The menu images should have no text (other than for logos). The text is overlaid when the page loads.
The other issue is using tables with fixed with. They should all be percentages. However for your layout I do not see any reason to use a table but rather incorporate bootstrap with div tags.
I'm more than happy to help you through this but to get your site responsive on ALL devices and browsers you will need to incorporate libraries such as bootstrap as they built to cover all bases.

To Gauthier, Rob Jurd:

So I think you are saying the issue is the image map?

So I have to do the menu a different way?

FYI, the page resp_test1.htm has no tables & was done using bootstrap (as far as I could figure it out).

I'd appreciate your comments on that one, disregarding the image map. Do I have bootstrap right or is it screwed up?

For a menu, an image map just won't work (responsive anyway) so yes you'll need to do the menu another way. Typically this is done with ul and li elements and the whole menu collapses to just an icon at low width resolutions (e.g. mobile devices).

Just like this http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_case_navbar7&stacked=h

View that page on page your phone and computer. Same page, same code though the layout changes (all done with media queries)

To Rob Jurd,

That's very useful. I was thinking of trying to make it as much like the current menu as possible. I was thinking:

(1) Make the existing menu items into 7 images, like the attached. Just display them across the top each with a link. I realize there is no mouseover, etc. No image size specified. See attached menu1.jpg

(2) Take the attached image top_images & put it underneath the menu.

Do the rest like I have it.

The reason I think this is better is the customer will want this look & feel at the top.

In all cases, specify no width / height for the image (I'm thinking Bootstrap will size accordingly depending upon the device.

Will that work?

Thanks,

Rob Jurd,

I forgot the attachments.
menu1.jpg
top-images.jpg

How does it look on the iPhone?  You want to answer that question before you even consider how it looks on a tablet, laptop or desktop.  Because that's where web access is going these days and if your site is not responsive it will be automatically penalized by Google.  So think Mobile-First in all design and forget about the desktop until after your mobile design is perfected.

Please also take on-board that it's not just me saying mobile first - Ray has jumped in here to reiterate how important that is.

(1) Make the existing menu items into 7 images, like the attached. Just display them across the top each with a link. I realize there is no mouseover, etc. No image size specified. See attached menu1.jpg

You could do that but it doesn't scale well on small devices. It just will not be responsive the way you want it to.  Sure I understand about the customer wanting the look, however I believe you can get this with CSS (vector based), rather than a raster image.  I'll show you what I mean.

(2) Take the attached image top_images & put it underneath the menu.

That's a start.  I believe we can replicate the look you want, retaining most of the design you have so far.

Rob Jurd,

OK, I saw what you did but I want to try for a horizontal menu.

Please look at http://rainrich.com/scheduling/bs_page.htm. The source html / css is attached. In firefox on my PC, it looks like I want it to.

On the iphone, the menu is in a column (not spread across horizontally at the top) & the image does not show up at all.

I used class="img-responsive" for the image, thinking that would make it work, but it doesn't even show.

What's wrong?
bs-page.htm

I'm closing this on, will start another.

Thanks