Why is my <h1> font-size not working in CodePen?

HTML-CSS
1

I am starting my tribute page and cannot figure out why in CodePen my < h1 > text does not change size but my < p > text does. If I check my text in a text editor it works as I want. Of course, the override for < h1 > size 20 px is not a good size, it is only to try if it works and I cannot get this to work in codepen.

here is my code:

<head>
<style>
  body {
    background-color: #F0AD1E
  }
h1 { 
  color: #1E31F0; 
  text-align: center;
  font-family: verdana;
  font-size: 20px;
}
  p {
    color: #0C0C0C; 
    text-align: center;
    font-family: Helvetica;
    font-size: 22px;
 }
  
</style>
  </head>
<body>
<h1> Danny Gatton </h1>
    <P> "The worlds greatest unknown guitarist"</p>
</body>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

can you post the link to your oen so we can see what you see?

1 Like
4

Sure:
https://codepen.io/Fletchdad/pen/rNMYbzL

5

they both changes size with no issue for me - what do you see that doesn’t go as you want?

6

ss1
ss11294Ă—728 107 KB
ss2
ss21920Ă—1200 237 KB

here are 2 SS’s. (sorry about the size difference, I am using G IMP and dont know it well…)
As you see, I chaged sizes in both texts, < h1 > and < p >. < p > changes, but < h1 > does not. It seems to change at first then reverts to the same size. it is not terrible but bugs me that I cannot get it to work. I will try on another PC and see if that helps.

7

Why did you add this javascript?
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

When I deleted that the h1 changes worked for me

8

That is a good question… I didnt add it on purpose, so I am not sure how it got there. I was also wondering what it was and how it got there. But I am a total noob so, well, who knows what I do? I dont always…lol. I erased it an voila!!! I suppose the < h1 > tag should have sent the red flags up. Live (and experiment) and learn.

Anyway, thanks for your input!!

Is there a thread for challenges? Like I want to put some public spotlight on my goals so people can hold me accountable if I get lazy.

9

A lot of people will join study groups and meet online.
If you search for “study group” or “study partner” on the forum, then you will get a lot of results and you can join one of those groups.

10

Thanks so much. I am glad I found you and this forum. I found a couple other places as well (w3school and Webmasterworld), so I will be busy for a while. I did all the modules and am now starting the projects from the Responsive Web Design section. I found myself immediately not sure what to do on the Tribute project but that just means I have to find out. It seems that you get a bit of info to get you started and then some of my own initiative is necessary which is an approach I like.