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

how to create breakpoints?

ive created correctly the first breakpoint with the hi settings but when I go to code the second breakpoint its saying im not setting the correct font-size for my h2 and im confused. @media screen and (min-width: 660px) { h2 { font-size: 1.93px; } }

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

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

6 Answers

Julian Gutierrez
Julian Gutierrez
19,201 Points

The second part of the challenge asks you to apply a font size of 1.75em to the h2 tag. Your code shows that you are trying to apply 1.93px.

On the quiz I was doing 1.75em just could not remember when I asked the question brain fart. So that's not the problem.

Julian Gutierrez
Julian Gutierrez
19,201 Points

Mind posting your full code, the code you posted only shows one breakpoint.

Julian Gutierrez
Julian Gutierrez
19,201 Points

Assuming that those "xx" are actually the correct value you are only missing a closing curly brace on your first breakpoint.

Sure:

@media screen and (min-width: 480px) { h1 { font-size: xx; }

@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } }

Those assumptions are true xx is the correct value. And I'm aware of the 2nd closing bracket. I got the first part of it right without the bracket. What am u doing wrong in my h2 code

Julian Gutierrez
Julian Gutierrez
19,201 Points

If that closing bracket isn't present any code you put after will not be scored correct because technically you are still inside of the first media query. Your second media query is correct syntactically.

Ok let me try that

Yes bro omg yes thank you. I've been stuck for three hours tho.

Julian Gutierrez
Julian Gutierrez
19,201 Points

No problem, the challenge shouldn't mark the first part correct without that closing brace, don't know why it does, but glad you can now move on.