Sheesh! I'm back again!

This time I'm dealing with media queries in CSS3 to create a fluid design for my landing pages.

It's a fact- concrete, fixed-size designs simply don't cut it anymore, especially if you want to use your site(s) for internet marketing.

I started off by reading tutorials like this one.

I added the following into my HTML file for this landing page:
inside the <head> tag:
HTML Code:
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
At the bottom, for browsers that don't handle CSS3 media queries, I link to an external script:
HTML Code:
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
I don't have a catch-all container for the current landing page HTML, but there is a content-wrapper with an i.d., #lpcontent. I guess that will need to be added in, but I do not know what its styles should be.

The first step here, in my mind, is to figure out how to slim/scale the graphics when the viewport width is less than 960px. I'm not aware of a CSS property that scales graphics, although in the tutorial I linked, the author performs scaling with images.

This is the only CSS I have so far added in to create a fluid design:
Code:
/* if the viewport width is less than 960px (original design size), these styles apply */
@media screen and (max-width:960px){
	#bgtop, #bgmid, #bgbotm{
		max-width:100%;
		height:auto;
		width:auto\9; /* ie8 */
		margin:0;
		margin-left:2%;
	}
	
	#lpcontent{
		width:auto;
	}
	
	img{
		max-width:100%;
		height:auto;
		width:auto\9; /* ie8 */
	}
}
Hopefully this thread can help designers with another example of responsive design.

Thanks, SitePointers!
-Tyler