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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by Dwight Schofield
Dwight Schofield
2,686 Points

my code "aint" workin'

My code for making a breakpoint at 660 px that changes the h1 font size to 1.75px isn't working. it seems as though i am supposed to be doing the very same thing that i did in the previous question but with different min-width, heading size, and px size of the h2 plugged in. i did the very same thing with the different entries but its not working.

css/main.css 
a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

@media screen and (min-width: 480px) {
  h1 {
  font-size: 2.5em;
  }
}
@media screen and (min-width: 660px) {
  h2 {
    font-size:175em;
  }

}

img {
  max-width: 100%;
}

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

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

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

nav li {
  display: inline-block;
}

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

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

.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;
}

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You have a typo. It's supposed to be 1.75em. But you've typed 175em. That's going to be some really large text :smiley:

As a side note, you might want to put the media queries at the bottom of the file. There's a chance that in further steps down the line that the rules below them might be overwriting properties due to the nature of CSS.

Good luck! :sparkles:

Dwight Schofield
Dwight Schofield
2,686 Points

thanks "fer yer" help! Jennifer. Yeah, 175 px would be pretty big. I guess i have been on my computer for a little too long and i am starting to get a little tired. I think that's why i made the typo.so I think i'll get off it now. thanks again for your help!