Hi, I am new to CSS in some ways and old to is in others. However I am redoing my site so that it is a Responsive design. I have played around with % and Ems but it am not having any luck. Pretty much I want to font to change depending on the screen size. Max-Width: 1200px Min-Width: 300px. However no matter how I play with the fonts and div tags the font is not adjusting to the screen sizes any ideas or suggestions on how to do this. I think maybe you have to incorporate Java Script (No clue on that) Any suggestions or hits are much appreciated. (The code below is like the 5th or 6th time playing around with it so it may be all messed up by now lol! Cool

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="Header.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<style type="text/css">
{
	@import url(<a href="http://fonts.googleapis.com/css?family=Fjalla+One" rel="nofollow">http://fonts.googleapis.com/css?family=Fjalla+One</a>);
	@media screen and (min-width:300px) and (max-width: 1200px)
}
</style>
</head>
 
<body>
<div id="body">
    <div id="header"></div>
    <div id="main">
        <div id="content-1">Light</div>
        <div id="content-2">
          <div id="content-2-1">Of</div>
            <div id="content-2-2">Life</div>
        </div>
    </div>
    <div id="footer">Photography.net</div>
</div>
<div id="min">Content for  id "min" Goes Here</div>
</body>
</html>
<code>
#body {
	width: 100%;
	min-width: 300px
	font-family: 'Fjalla One', sans-serif;
 
}
#content-1 {
	float:left;
	font-size: 3em;
	color: #ABBC6B;
	font-weight: bold;
	margin-left: 2px;
	margin-top: 15px;
	width: 35%;
}
#content-2-1 {
	float:left;
	font-size: 2.75em;
	font-weight: bolder;
	color: #D6CDBE;
	margin-top: 35px;
	padding: 2px;
	width: 20%;
}
#content-2-2 {
	float:left;
	font-size: 3em;
	color: #ABBC6B;
	font-weight: bold;
	margin-left: 25px;
	margin-top: 25px;
	width: 40%;
}
#footer {
font-size-adjust: .59;
	font-weight: bold;
	color: #E7AC5C;
	width: 100%;
	min-width: 300px;
	text-align: left;
	float: left;
	padding-top: -10px;
	margin-top: -35px;
}
#min {
	float: left;
	width: 300px;
	border: thin solid #000;
}