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

Rasbin Rijal
PLUS
Rasbin Rijal
Courses Plus Student 10,864 Points
Posted by Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

[ SOLVED ] Create a breakpoint min width 480px and make h1 font size 2.5em

I don't understand why doesn't it work when this code placed at top and why it works when kept at bottom? Can someone explain a bit about it please?

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

Thanks

css/main.css 
}

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

} 

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

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

You performed correctly, but for the purposes of the Challenge you are to put he media query at the end of the CSS file for it to pass.

Also, in your pasted main.css there is an empty closing curly bracket at the top. Be sure that is not there, which it shouldn't be if you refresh the Challenge.

Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

Thank you Sean for your answer. Even when I removed thee closing curly bracket at top the code fails. But yeah it is executed successfully when I place at the end.

If it is so (to keep code at the end) only for the purpose of Challenge for a file to pass, it would be better to add / provide that information in the instruction so that other people don't get stuck over there.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

A Challenge will typically request a specific line number or similar to insert code at if it is required.

If a Challenge is not specific on where to place code then I would assume that any code would be inserted at the end of the file.

In this particular example, in a real world scenario, it does not matter where the media query is placed as the browser will parse the CSS according to breakpoints based upon parameters specified by any media queries.