Scaling/layout issue

It is doing what it is supposed to.  Your site is a responsive and when you go smaller, this takes over  <link rel="stylesheet" href="themes/dinah/css/ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

http://www.dinahbodydesign.com/themes/dinah/css/responsiveslides.min.js

I think for today, you are pretty safe to take out any reference to ie6,7 and 8.  Google stopped supporting ie8 last November and in 6 months XP is no longer supported by MS.

It is doing what it is supposed to.

Yes, that might be the case, but it would be better were the nav menu to scale too and allow the slider to remain in the same relative position to it. In my browser, the nav menu doesn't scale at all really.

Then you should update your ipad.css for that.  It is currently set for 14px.  

.nav_menu ul li a {font-size:12px;}

Select allOpen in new window

then

.nav_menu ul li{
	font-family:Verdana, Geneva, sans-serif;
	padding: 5px 0px 5px 3px;
	font-size:12px;
	line-height:12px;
	
	}

Select allOpen in new window

You should place that code under this line
@media only screen and (max-width: 640px) {

OK thanks. Actually 'the' would be a better word than 'your' - i didn't write it ;)

Font sizing is something i'm not quite up to speed with. It used to be recommended that em sizing be used as opposed to point sizes for better scaling. Is that still the case? What would be a good strategy such that the font could scale downwards with window (downward) sizing - is it even possible?

Points are for printing.  Pixels are for screen.  em is screen relative to the parent and rem is screen relative to the viewport.  

I use px.  It's easy to know the size and the browser does adjust. If you want to use ems, then use rems.

http://www.css3files.com/2012/10/11/relative-is-the-new-absolute-the-rem-unit/
http://www.vilepickle.com/blog/2012/03/13/00142-font-sizing-css-em-vs-px-vs-rem#.UdwVRD6G03w
http://www.sitepoint.com/new-css3-relative-font-size/

Points are for printing.

Sorry - i meant pixels

If you are looking for responsiveness to the viewport then you can use the vieport relative units. 1vw is equal to 1% of the viewport width and 1vh is equal to 1% of the viewport height.  Both of them are responsive in that any change in the viewport dimensions are automatically reflected in the elements using them.  The value always resolves to a number and so can be used in any CSS property where a number is permitted.  

They are support on all modern browsers, but for older browsers you can use a pixel or percentage fallback.  Along with the calc() function they can be used to manage pretty fine control.  This description of calc() and viewport relative units might help

Cd&

It's easy to know the size and the browser does adjust.

In my version of Firefox, the nav bar does not adjust actually, which i'm guessing is part of the problem i described. How is that to be explained?

I can see my CSS knowledge is going to be enlarged by this little episode ;) I'm wondering why i've never seen or heard of viewport relative units? Surely they must be relatively rare?

In that case, i think it might be wise to avoid stuff only working in CSS3 perhaps.

Can we get back to specifics - what's the best way to provide a solution to this particular scaling issue?

well I see some thing a little strange their.  #navigation has a max-width of 200px applied on a large screen, but when I size down I get media query for max-width 1024, and the max-width of #navigation goes to 220px.  So it gets wider for the narrower screen.  If was going to re-size it should be getting narrower.

Cd&

Yes, looks like they might have got the sizing wrong. I notice the padding sizes are no different from the other #navigation. Is the 'mobile' css meant to kick in when it's sized small even though the device is no different?

The media queries respond to the screen width in the case of the operand being max-width. There is a whole range of possibilities including orientation, and whether the device is a handheld.  I think Mozilla has just about all the possibilities (consequences) here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Cd&

While the 1vw sounds like an easy solution, I still think you want to use media queries to have greater control

I agree you need to use media queries most of the time no matter what units you use.  The way arounf fonts getting to small with vw is to us calc()
font-size:calc(1vw + 5px);
effectively creates a min-font-size though it can be a problem for Chrome which seems to be becoming the new IE7 with all the specifications errors and sloppy implementations it contains.

Cd&

Thanks folks