Having issues with headings

HTML & CSS
1

Hi there,

Learner here, having issues with font sizes in my headings.

This image shows my problem - “Welcome” is h1, “Contact Me” and “Latest Projects” are h2, but all headings should display as the same size.

Here’s the code I’ve written:


h1, h2 {
 font-family: Georgia, serif;
 color: #fff;
 font-style: normal;
 font-size: 2em;
}

#welcomeHeader {
 background: #556270;
 width: 100%;
 height: 45px;
}

#contactHeader {
 background: #556270;
 width: 100%;
 height: 45px;
}

#projectsHeader {
 background: #556270;
 width: 100%;
 height: 45px;
 text-align: right;
}

Where am I going wrong? :\

Thanks!

2

Hi,
After looking at your screenshot I am going to guess that you have ran into an em Font-Size Scaling issue here.

Your “Latest Projects” h2 is a child of your right column and I am guessing that you have set a font-size on that right column parent div.

We would need to see your complete css/html to pinpoint it for you but hopefully that link I gave above will show you how em font scaling works. This Article also explains em font scaling very well too.

Post a link to your page or the complete code if you need further help with it. :wink:

3

I am indeed using ems for font size, but can’t seem to pinpoint the part of the code you’re refering to, Rayzur…

Here’s a link to the page, some detective-work would be appreciated :slight_smile:

4

Hi,
The problem is in the left column on the .contentText class. It is the parent of the h2 headings in the left column and you have set it’s base font-size to .8em therefore any children will base their font-size from that.

web.css line 172


.contentText {

 color: #556270;
 font: italic [COLOR=Blue]0.8em[/COLOR] Georgia, serif;

}
5

If you want to keep the h2 in the right column the same size as the left column then you can declare the .8em font-size in one of these two selectors. Not both though or more scaling problems will begin.


#projectsInner {
 background: #f4f4f4;
 width: 100%;
 height: 100%;
[COLOR=Red]/*font: italic 0.8em Georgia, serif;*/[/COLOR]
}

#projectsHeader {
 background: #556270;
 width: 100%;
 height: 45px;
 text-align: right;
[COLOR=Blue]font: italic 0.8em Georgia, serif;[/COLOR]
}

If you want to target just the h2 then set the font-size on the #projectsHeader. If you want to target the complete right column you could set it on the #projectsInner.

6

Ah, of course! A fresh pair of eyes always spots the things you can’t see.

Thanks for figuring that one out for me, Rayzur, and for offering a solution :slight_smile:

7

Glad to be of help! :slight_smile:

Like the article I linked to above says, “Who’s your Daddy?”
That is always the question at hand when dealing with ems. :wink:

Cheers