I can't get my text to be scalable

So, I’ve started building a site using responsive design and for some reason I can’t get the font size to change. I’ve looked at multiple sources and I still don’t get what I’m missing. Here is the code for my CSS and one page of HTML.

Can someone please tell me what i’m doing wrong. thx

START OF CSS


@charset "utf-8";
/* CSS Document */


body

 {
	font-size:100%;
	
}


#MainDiv {
	width:100%;
	background-image:url(../IMAGES/Header%20background%20image.png);
	background-repeat:repeat-x;
	overflow:hidden;
	font-size:100%;
	
}

#HeaderArea {
	width: 80%; /*1024px in photoshop*/
	height: 40%;
	margin:auto;
	font-size: 100%;
		
}



#LogoHeader {
	float:left;
	width: 49.13769531%; /* 503.17 px / 1024px */
}


#WorkFlowImage {
	margin:auto;
	padding:2%;
	clear:float;
	width:70%;

	
}



img {
	max-width: 100%;
}


#city {
	float:right;
	margin-top:2.8%;
	margin-right:1%;
	font-family:Verdana, Geneva, sans-serif;
	width:10%;

}


.city {
	font-size:1.5em;
	color:#5b5b5b;
	margin-top:2.8%;
	margin-right:1%;
	font-family:Verdana, Geneva, sans-serif;
	

}



h1.phone {
	font-size:1.4em;
	float:right;
	margin-right:1%;
	margin-top:2.9%;
	color:#878787;
	font-family:Verdana, Geneva, sans-serif;
}


END OF CSS

HTML PAGE

<!doctype html>

<html lang="en">
<head>
<link href="CSS file.css" rel="stylesheet" type="text/css">

<title>Connect 4 Web Design</title>

</head>

<body>

<div id="MainDiv"> <!--MainDiv-->


<div id="HeaderArea"> <!--HeaderArea-->


<div id="LogoHeader"> <!--LogoHeader-->
<img src="../IMAGES/Connect 4 Web Design logo.png" alt="Connect 4 Web design logo">
</div> <!--LogoHeader-->


<h1 class="phone">888.888.8888</h1>



<p class="city">City, State</p>





<div id="WorkFlowImage"> <!--WorkFlowImage-->
<img src="../IMAGES/Header start to finish image.png"  alt="start to finish work flow">
</div> <!--WorkflowImage-->





</div> <!--End of Headarea-->


</div> <!--MainDiv-->


</body>


</html>

%'s don’t work based off a websites height/width. Percentages are based off hte parent font size. I assume you think they work differently?

No, I was thinking that the percentage worked off of the parent. As I understand it my parent in for the <h1 class=“phone”>888.888.8888</h1> is
<div id=“HeaderArea”> which has its font size set at 100% which should be about 16px. I then used 1.4em to make the phone # 22.4px when the font size is 16px, but I also wanted it scalable. So, I’m just confused on what I’m missing here. What’s wrong with my thinking?

[FONT=Verdana]I think you’re running into problems of specificity in your CSS rules.

Basically, a rule set on an id will trump a rule set on a class, all other things being equal. Your

<h1 class="phone">888.888.8888</h1>
<p class="city">City, State</p>

are contained within <div id=“HeaderArea”> and the font-size 100% rule on that is over-riding the font-size rules on your other two classes.

As you’ve already set font-size 100% on body, you don’t need to set it again on that div. You only need to declare it where you want it to be something other than 100%.[/FONT]

Well, I removed the font size declaration on the <div Id=“HeaderArea”> but it changed nothing and so I’m stumped.

[FONT=Verdana]You’ll need to remove the font-size declaration from #MainDiv, too. (Sorry - I hadn’t spotted it was also nested inside that div.)

Basically, you need to check that the class you’re trying to target isn’t nested in an element with an id, because the styling on the id will always win out.

Have a look at the SitePoint reference on specificity, which explains it better than I can. :)[/FONT]

When I read your first post I actually removed the declaration on both Divs and it still did nothing.

Do you have a link to a live site? I’ve tested it here with the code you gave above and there’s no problem at all with the font size adjusting. If it’s not working for you, then there must be something else going on.

I think what people are trying to convey here is that the WIDTH of the parent does NOT ( and cannot) affect the size of the font.

Oddly enough you can make the container be based on the size of the font; width:30em; for example.

Now… The font size IN an element IS based on the parent’s FONT SIZE. So actually, you are mathematically getting a font size that is 22.4px. You may be expecting it to look different however because an unstyled H1 ( why is a phone # an H1?!?) is much bigger than 140% so your headline looks smaller than the original unstyled one ( so you might be thinking your font is becoming smaller rather than larger)

Well, I get that the parent’s font size is what affects the size of the new font. My problem is that when i resize the browser window that they font size does not adjust according.

It’s not meant to resize the text as the browser window changes. You have to manually increase/decrease the text/zoom. This falls back to you thinking about how font sizes work in relation to the page.

I should say that I don’t have the site up yet and would have put it up to be more helpful, but I’m having hosting issues. Well, anyways I think I got confused and thought that it’s possible to adjust font size and I thought that was part of Responsive Web Design. I just don’t get why its not possible to have fonts resize as the browser window resizes just like images do. I’ve seen where you can set new styles once a screen reaches a certain size (e.g http://earthhour.fr/), but it just seems logical to me to have fonts resize based on the window size. If this is possible then please let me know. thx

You could do it with @media queries to an extent. For example, you could say that, at a certain browser width, the body font size is a certain size (e.g. 100%) and at greater browser widths it gets incrementally larger. But you’d only do it at intervals (like every 300px, for example, rather than evey few pixels). It would look ridiculous otherwise, and you’d have a lot of CSS bloat. All the same, I expect most users would find that behavior to be quite odd, and as others have said, most browsers make text bigger as you zoom.

Well, your code is filled with issues – from apparent misunderstandings to outright flawed methodologies… Lemme go down the list.

In your “markup” (and I’m making quotes in the air on that) your comment placements could be tripping rendering bugs in certain versions of IE and FF – yes, I said COMMENTS. Between the pointless comments like:

<div id=“MainDiv”> <!–MainDiv–>
No, really, id=“MainDiv” is the mainDIV?!? I never would have guessed!

to closing comments that could end up between floats, or certain types of placements tripping rendering bugs like:
</div> <!–LogoHeader–>

Even the comments are bad coding practice.

What on earth makes everything on the page a subsection of the phone number – that’s what a H1 does, is declare everything on the page is a subsection of it. Not sure what all these images are, but I’m willing to bet the Logo is presentation, so that doesn’t even belong in the HTML – that’s CSS’s job and that right there is probably your H1 candidate, not the phone number.

In the CSS, you’re declaring values for no reason, NOT redeclaring your line-heights, declaring paddings and widths at the same time which is most always a miserable fail at CSS coding and likely to break your layout – and even using bizzare width calculations that means you bought into the LIE of 62.5%,

Since your 49.ridiculouslylong width on #logoHeader … gah, I can’t even figure out what that mess is supposed to do, other than use percentages ALL WRONG.

Do you have a picture of what you’re trying to accomplish, because sitting here looking at your code, it’s gibberish that shouldn’t even make a viable layout… though one of your comments already says that:

 in photoshop*/

Well there’s your problem.

If you would want that kind of behavior without bloat code, you’d best be off doing it in JS. Although most users would find it odd.