Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

highpriestess
highpriestess
5,486 Points
Posted by highpriestess
highpriestess
5,486 Points

Why isn't the font size changing?

This is bugging me. It's from the intro "build a website" course.

I cannot change the size of the h1 or the h2 font. No matter what I type in there the size does not change.

I can't figure out why. Your assistance will be much appreciated.

GENERAL
********************************/

body {
  font-family: 'Open-Sans', sans-serif;
}  

#wrapper {
 max-width: 940px;
 margin: 0 auto; 
  padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
  max-width: 100%;
}


h3 {
    margin: 0 0 1em 0;
}

/********************************
HEADING
********************************/


header {
   float: left;
   margin: 0 0 30px 0;
   padding: 5px 0 0 0;
   width: 100%;

}


#logo {
   text-align: center;
   margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 20px 0 10px 0;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 0.8em;
}  

h2 {
  font-size: 1.2em;
  margin: -15px,0,0;
  font-weight: bold;
}  

/********************************
NAVIGATION
********************************/


nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}



nav a {
   font-weight: 800;
   padding: 15px 10px;
}
/********************************
FOOTER
********************************/


footer{
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/********************************
PAGE: PORTFOLIO
********************************/



#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}


#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: bdc3c7;
}



#gallery li a p {
  margin: 0;
  padding: 5%;
  color: #bdc3c7;
}



/********************************
PAGE: ABOUT
********************************/


.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
}  



/********************************
PAGE: CONTACT
********************************/

.contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin 0 0 10px;
}


.contact-info li.phone a {
  background-image: url('../img/phone.png');
}


.contact-info li.mail a {
  background-image: url('../img/mail.png');
}


.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


/********************************
COLORS
********************************/

/* Site body */

body {
   background-color: #fffff0;
    color: #999;
}

/* green header */

header{
  background:#49a5a9;
  border-color: #ed7a66;
}

/* nav background on mobile devices */

nav {
  background: #599a68;
}

h1,h2 {
  color: #fff;
}

a{
  color: #6ab47b;

}



nav a, nav a:visited {
    color: #fff;
}

nav a.selected, nav a:hover {
    color: #fb2e01;
}```

2 Answers

Stephen Blank
Stephen Blank
16,286 Points
Stephen Blank
Stephen Blank
16,286 Points

I put your css into a codepen

http://codepen.io/anon/pen/zxOVaZ

The only change I made was to change the font color of h1 and h2 so I could see them. (line 221)

And I changed the size of h2 on line 55. Seems to be working.

Check and see if you are linking to any other CSS files on your html page, which could be overriding your styles.

Also, you can use google developer tools to see what styles are affecting particular elements on your page. Just right-click an element and Inspect Element.

highpriestess
highpriestess
5,486 Points
highpriestess
highpriestess
5,486 Points

Check and see if you are linking to any other CSS files on your html page, which could be overriding your styles.

Of course! <slapping head>

That will surely rank up there as one of the dumbest mistakes I've made so far.

..or maybe it was just past my bedtime.

Thank you, Steve.