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

Posted by brandypineda
brandypineda
1,773 Points

[Solved] Task 2 of 2 for writing ccs media queries, even correct code does not let me pass. Help?

So for task 1, I realized there was a glitch because it only let me pass if I removed both closing curly brackets for the media query. Does anyone know the glitch solution for the second task? Or how to resolve it?
I have also tried doing the same thing (removing both or one curly bracket - no dice) thanks!

[UPDATE] Not a glitch. Put your code at the end, not the top. Thank you Tobias Helmrich!

css/main.css 
@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;


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





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

2 Answers

Tobias Helmrich
Tobias Helmrich
31,604 Points

Hey Brandy,

could you please specify the challenge you're doing as this would help us to try out your code to see possible errors? :)

I think it wasn't a glitch but the problem is that you're writing your media queries in the beginning of the CSS file. If they're in the beginning they'll get overwritten by other rules that select the same element later in the stylesheet and change the same property to another value.

Here for example:

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

the font-size of your h1 would be overwritten because of the cascade in CSS.

Try placing your media queries in the end and add your curly braces again like so:

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


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

and it should work. If not, let me know. I hope that helps, good luck! :)

brandypineda
brandypineda
1,773 Points

AMAZING! Thank you!!

And this task is the 2nd task for Write CSS Media Queries under Responsive Web Design and Testing under How to Make a Website under the Web Design Track.

Zailey Walls
Zailey Walls
5,427 Points
Zailey Walls
Zailey Walls
5,427 Points

You forgot the closing brackets for your first media query and h1 tag. 

@media screen and (min-width: 480px)  {
  h1 {
    font-size: 2.5em;
  }
}
brandypineda
brandypineda
1,773 Points

I'm aware, but it won't pass unless I remove them. If I put them it says task incomplete ....

But thanks!